如何捕获输入到 HTML 表单字段中的数据？答案

【问题标题】：How do I capture data entered into the field of an HTML form?如何捕获输入到 HTML 表单字段中的数据？
【发布时间】：2015-06-01 10:39:50
【问题描述】：

我开发了一个 html 联系表。如何捕获使用 JavaScript 在表单中输入的数据？（我不能使用 jQuery）？我想我需要使用document.GetElementById()，但是如何？当用户离开字段、单选按钮或复选框时，我是否需要使用诸如onBlur 之类的事件来捕获它？

/*Borders of fields for validation and indication*/
input:invalid{
    box-shadow: 0 0 2px .5px red;
}
textarea:invalid{
    box-shadow: 0 0 2px .5px red;
}
/*Spacing around fields this is in place of <br>*/
label{
    display: block; 
    padding-top: 5px
}

<!DOCTYPE html>
    <html>
    <head>
      <title>Contact Me</title>
      <link rel="stylesheet" type="text/css" href="contactform_Lab8.css">
    </head>
    
    <body>
    
    <form id="contactus">
    	<fieldset>
    		<label for="name">Name:</label>
    			<input id="name" type="text" name="name" autofocus required>
    		<label for="email">Email:</label>
    			<input id="email" type="email" name="email" required>
    		<label for="phone">Phone:</label>
    			<input id="phone" type="tel" name="phone" required>
    		<label for="status">Status:			
    			<select id="status" name="status" required>
    				<option value="client">Client</option>
    				<option value="partner">Partner</option>
    				<option value="vendor">Vendor</option>
    			</select>
    		</label>
    		<label for="subscribe">
    			<input id="subscribe" type="checkbox" name="subscribe" value="check" checked> 
    		Send me your newsletter</label>
    		<label for="sales">
    			<label for="support">
    				<input id="slsSupport" type="radio" name="slsSupport" value="sales" checked>Sales
    				<input id="slsSupport" type="radio" name="slsSupport" value="support">Support
    			</label>
    		</label>
    		<label for="msg">Message:</label>
    			<textarea id="msg" name="msg" rows="10" cols="30" required></textarea>
    		</fieldset>
    		<fieldset>
    		<button type="submit">Send</button>
    		<button type="reset">Reset</button>
    		</fieldset>
    </form>
    <script src="contactform_Lab8.js"></script>
    
    </body>
    </html>

【问题讨论】：

这是您要找的吗？ - stackoverflow.com/questions/11563638/…
在询问之前总是谷歌:)
@wavemode 这就是他所知道的部分。他不明白的是如何使用事件处理程序运行它。
不要使用getelementById，而是使用jQuery，这将提供更好的跨浏览器兼容性。要了解使用 jQuery 获取值的想法，请查看 .val() ，其中包含示例代码。您还可以使用 jQuery 轻松处理事件。
为了更好的 UI，我会选择 change 和 input 事件而不是 blur 等。

标签： javascript html css forms

【解决方案1】：

只是value 属性

//the specific input
var inputID = document.getElementById('inputID');

//add a listener to the object for blur
inputID.addEventListener('blur',function(){
    //the value attribute is the way to get what the user entered.
    console.log(inputID.value);
});

编辑

为了更可重用的方法。为表单中的所有元素提供要添加相同模糊侦听器的相同类。然后遍历所有这些元素并添加监听器和处理程序。

var inputClass = document.getElementsByClassName('formInput');

for (var i = 0, ii = inputClass.length; i < ii ; i++) {
   inputClass[i].addEventListener('blur', doSomething);
}

function doSomething() {
    var inputField = this;
    console.log(inputField.value);
}

示例：http://codepen.io/ScavaJripter/pen/33d9336b618f3162a9dfb16379ef4fcc/

【讨论】：

或者也许使用功能方法和表单动作元素迭代器的更具可扩展性的方法。
@Roko C. Buljan：我绝对同意，但是先吃奶再吃肉。
我根本不会使用 onblur 处理程序。您不需要将 javascript 放入您的 html 标记中。你可以给你的 HTML 输入一个 id，然后在你的 javascript 中你可以附加一个监听器来监听模糊事件。
这个页面讨论的是旧的做法，也就是你所说的：developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
如果要添加事件监听器，则不需要事件名称前的“on”。所以改变 onchange 只是改变。

【解决方案2】：

根据您的需要，有很多方法可以做到这一点。这是一个例子 A.alerting name 字段的值 onblur B. 阻止表单提交，除非名称是 charles（最终验证）

window.onload = function ()
{
  var name =document.getElementById("name");
  name.addEventListener("blur", alertVal);
  function alertVal(){
  alert(name.value);
  }
  var form = document.getElementById("contactus");
  form.addEventListener("submit",function(e){
  e.preventDefault();
  if(name.value == "charles"){
    alert("Success submitting form");
    form.submit();
    }
    else{
    alert("name must be charles");
    }
  });
 
}

/*Borders of fields for validation and indication*/
input:invalid{
    box-shadow: 0 0 2px .5px red;
}
textarea:invalid{
    box-shadow: 0 0 2px .5px red;
}
/*Spacing around fields this is in place of <br>*/
label{display: block; padding-top: 5px}

<!DOCTYPE html>
<html>
<head>
  <title>Contact Me</title>
  <link rel="stylesheet" type="text/css" href="contactform_Lab8.css">
</head>

<body>

<form id="contactus">
    <fieldset>
        <label for="name">Name:</label>
            <input id="name" type="text" name="name" id="name" autofocus required>
        <label for="email">Email:</label>
            <input id="email" type="email" name="email" required>
        <label for="phone">Phone:</label>
            <input id="phone" type="tel" name="phone" required>
        <label for="status">Status:         
            <select id="status" name="status" required>
                <option value="client">Client</option>
                <option value="partner">Partner</option>
                <option value="vendor">Vendor</option>
            </select>
        </label>
        <label for="subscribe">
            <input id="subscribe" type="checkbox" name="subscribe" value="check" checked> 
        Send me your newsletter</label>
        <label for="sales">
            <label for="support">
                <input id="slsSupport" type="radio" name="slsSupport" value="sales" checked>Sales
                <input id="slsSupport" type="radio" name="slsSupport" value="support">Support
            </label>
        </label>
        <label for="msg">Message:</label>
            <textarea id="msg" name="msg" rows="10" cols="30" required></textarea>
        </fieldset>
        <fieldset>
        <button type="submit">Send</button>
        <button type="reset">Reset</button>
        </fieldset>
</form>
<script type="contactform_Lab8.js"></script>

</body>

</html>

【讨论】：