Question

我有一个简单的表单，其中包含一个用于测试的文本字段。我现在需要将用户键入的信息发送到console.log。这是可能的，如果是的话，我会写什么？

<form class="pure-form">
    <input id="name" type="text" placeholder="Enter Name" />
    <button type="submit"><i class="fa fa-chevron-circle-right"></i></button>
</form>

Answer 1

var nameInput = document.getElementById('name');

document.querySelector('form.pure-form').addEventListener('submit', function (e) {

    //prevent the normal submission of the form
    e.preventDefault();

    console.log(nameInput.value);    
});

Answer 2

不确定为什么这个问题被低估了。这是基本的，但它仍然是一个非常有效的问题。

最简单的方法是通过ID获取输入然后获取它的值和console.log它。

因此，在您包含的单独的JavaScript文件中，或在块中，您将使用：

console.log(document.getElementById('name').getAttribute('value'));

你可能也希望将它挂钩到某个事件，因此每次做某事时都会打印出来。 “改变”事件可能是最合适的。它会在每次用户输入内容时触发，然后更改焦点（有时它也会在他们停止输入时触发，但通常不会触发）。如果您希望每次字母更改时都打印，您可能希望使用“keydown”，“keyup”或“keypress”事件（其中之一）。

document.getElementById('name').addEventListener('change', function() {
    console.log(this.getAttribute('value'));
});

Answer 3

这里有一个on change事件和一个keyup（如果你需要看到它有点“活着”）。

<form class="pure-form">
  <input id="name" type="text" placeholder="Enter Name" onChange="inputChange(event)" onKeyUp="inputChange(event)" />
  <button type="submit"><i class="fa fa-chevron-circle-right"></i></button>
</form>
<script type="text/javascript">
  function inputChange(e) {
   console.log(document.getElementById("name").value);
  }
</script>

Answer 4

不确定

var input = document.getElementById('name');
console.log(input.value);

将表单文本输入发送到console.log进行测试

4 个答案: