Question

这个问题有两个部分。第一个优先。注意我是HTML和JS的新手，所以请在解释中详细说明。

1。）我有一个表单标签，里面有一个输入标签和一个按钮，就像这样。这个想法 - 可能或可能不是风格倾向于，是让用户输入文本，但在单击按钮时将其绑定。这项工作：

<script>
var text;
</script>
<div>
  <form>
    <p>
      <label>Text goes below</label>
      <input id="in" type="text" placeholder="type stuff here">
    </p>
    <p>
      <button id = "aButton" onclick="text=document.getElementById('in').value"></button>
    </p>
  </form>
</div>

问题是，onclick也感觉就像刷新页面一样，这意味着用户无法再看到他们写下的内容。

所以问题是：如何阻止这种行为（例如onclick仅绑定到值并且不刷新页面以使文本保留在输入字段中）

注意：autocomplete =＆＃34; off＆＃34;没有工作

问题二是如何通过事件监听来实现这一目标？

Answer 1

此代码有效......

您正在使用按钮...导致表单发布...您需要使用<input type="button">

我已经放置了你的代码，在单击一个函数并调用该函数后调用它。

<script>
    var text;

    function clickme() {
        text=document.getElementById('in').value;

        console.log(text);
    }
</script>
<div>
    <form>
        <p>
          <label>Text goes below</label>
          <input id="in" type="text" placeholder="type stuff here">
        </p>

        <p>
          <input type="button" value="Click Me" onclick="clickme()"></input>
        </p>
    </form>
</div>

第二部分：通过事件监听来实现

要通过事件监听来实现这一点，您需要添加以下代码。

我正在使用jQuery。即使你不了解jQuery，我也会说它非常自我解释。

$('#id_of_your_button').click(function () {
    //the code which you want to execute
});

//Consider using jquery... it handles cross browser issues well and makes things simpler

//or without jquery
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {

});

注意

如果要通过监听事件添加事件处理程序，则需要记住在窗口加载事件之后添加事件处理程序代码。

$(window).load(function () { $('#id_of_your_button').click(function () { //the code which you want to execute }); });

这样做是为了确保在将任何处理程序附加到元素之前，该特定元素存在于DOM中并加载。

Answer 2

您应该按如下方式更改您的代码：

<button id = "aButton" onclick="return funcText()"></button>

<script>
  var text;
  function funcText() {
    text = document.getElementById('in').value;
    return false;
  }
</script>

这会阻止页面刷新，但我不知道如何通过事件监听来实现这一点......

通过onclick从表格内的按钮设置输入值：

2 个答案: