Javascript 在键入/单击时查找表单的ID和值
我有一个表单,有几种不同类型的输入(复选框、文本、数字等),我希望能够找到用户正在单击/键入的表单当前元素的ID以及他们正在输入的值 我目前正在使用未定义的Javascript 在键入/单击时查找表单的ID和值,javascript,Javascript,我有一个表单,有几种不同类型的输入(复选框、文本、数字等),我希望能够找到用户正在单击/键入的表单当前元素的ID以及他们正在输入的值 我目前正在使用未定义的作为值。我真的不知道从哪里开始(我不想使用jQuery) HTML <form id = "myForm" > <input type="text" id="name" name="name" placeholder ="Name" /> <
作为值。我真的不知道从哪里开始(我不想使用jQuery)
HTML
<form id = "myForm" >
<input type="text" id="name" name="name" placeholder ="Name" />
<input type="email" id="mail" name="email" placeholder ="Email" />
<input type="number" id="phoneNumber" name ="phone" placeholder = "Phone Number" />
<label for ="emailFormat">Email Signup Format:</label>
<select name="newsletter" id = "plain">
<option value = "Plain">Plain Text</option>
<option value = "HTML">HTML</option>
</select>
<label for="pets">Cars owned:</label>
<input type = "checkbox" id="mini" class = "ck" name ="mini">I have a mini.
<input type = "checkbox" id="motorbike" class = "ck" name ="motorbike">I have a motorbike.
<input type = "checkbox" id="thundercar" class = "ck" name ="thundercar">I have a thundercar.
<input type = "checkbox" id="brum" class = "ck" name ="brum">I have a brum.
<input type = "checkbox" id="roadrunner" class = "ck" name ="roadrunner">I have a roadrunner.
<button type="submit" id ="button">SUBMIT</button>
</form>
将事件绑定到表单时,依赖于事件冒泡,这将是事件处理程序中的表单
要获取触发事件的元素,可以使用event.target
function store(event) {
console.log(event.target.id);
console.log(event.target.value);
}
跨浏览器解决方案:
function store(e) {
var target = (e.target)? e.target : e.srcElement;
console.log(target.id);
console.log(target.value);
}
理想情况下,应该使用哪个currentTarget
或target
?@Rajesh@RajeshcurrentTarget
将与相同。此currentTarget
是事件处理程序附加到的元素,在本例中也是表单元素,与识别事件发生的元素的event.target
相反,OP想要使用onkeypress而不是onkeypup。如您所见,您将获得myForm
和undefined
——这是因为您使用单击侦听器-表单来定位表单本身
-未定义的是因为表单没有键控
-您必须为每个表单元素设置侦听器,以了解用户当前在文档中的位置。activeElement
提供具有当前焦点的DOM,然后从中提取其ID。但它可能没有听起来那么好。一种方法是将“焦点”事件处理程序添加到所需的所有事件中,并在变量中记录最后一个焦点字段。
function store(e) {
var target = (e.target)? e.target : e.srcElement;
console.log(target.id);
console.log(target.value);
}