Html表单是接受用户输入的互动元素。输入是其中一个重要的元素，它提供了不同的类型--text,textare 和button 。
在这篇博文中，我们将学习在javascript和jquery中读取输入类型文本值的以下方法。
让我们声明一个带有输入元素和一个按钮的表单
<html>
<head>
<title>Java form read input data example</title>
</head>
<script>
function submitEvent(event) {
event.preventDefault();
var name = document.getElementById("name");
var email = document.getElementById("email");
console.log(name.value); // name
console.log(email.value); // email
}
</script>
<body>
<form onsubmit="submitEvent(event)">
<div>
<label for="name">Name</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email" id="email">
</div>
<div>
<button onclick=submitEvent()>Submit</button>
</div>
</form>
</body>
</html>
使用文档getElementById选择器
Document 是javascript中的一个本地内置对象。它用于与html DOM对象进行交互并返回数据。
getElementById 它是用来获取一个带有id选择器的元素的值的方法之一 输入是用id值定义的。
<input type="text" name="name" id="name">
在javascript中，输入值可以用getElementById 选择器来读取。
document.getElementById("name")
它输出输入元素，如下图所示
<input type="text" name="name" id="name">
它的值属性返回输入的名称
document.getElementById("name").value // returns the user entered name
getElementsByClassName类选择器来读取输入值
这是文档对象中的一个方法，用来选择具有类名的元素。getElementsByClassName ，返回所有与类名匹配的元素。
它是类选择，返回HTMLCollection
输入是用类值定义的。
<input type="text" name="name" id="name" class="nameClass">
在javascript中，输入值可以通过getElementById 选择器来读取。
let nameClasses = document.getElementsByClassName("nameClass");
console.log(nameClasses); // return HTMLCollection
console.log(nameClasses[0]); // return first input element
console.log(nameClasses[0].value); // return entered input value
在控制台中的输出是
HTMLCollection [input#name.nameClass, name: input#name.nameClass]
<input type="text" name="name" id="name" class="nameClass">
enteredvalue
getElementsByName选择器来解析输入值
getElementsByName 是文档对象中的一个方法，用于选择所有带有名称属性的元素。这将返回 NodeList简单的输入元素被声明为没有名字。
<input type="text" name="name">
让我们看看使用getElementsByName读取输入值的javascript代码。
let nameValue = document.getElementsByName("name");
console.log(nameValue); // return NodeList
console.log(nameValue[0]); // return first input element
console.log(nameValue[0].value); // return entered input value
在控制台中记录的输出是
NodeList [input#name.nameClass]
<input type="text" name="name">
getElementsByTagName选择器来解析输入值
这是直接读取输入元素的标准方法，没有名称、ID和类别
getElementsByTagName 返回HTMLCollection的数组，使用数组索引来返回特定的输入元素。
<input type="text" name="name">
<input type="text" name="email">
下面是一个example to read input value with getElementsByTagName
let nameValue = document.getElementsByName("name");
console.log(nameValue); // return NodeList
console.log(nameValue[0]); // return first name input element
console.log(nameValue[0].value); // return entered input name value
console.log(nameValue[1]); // return second input element email
console.log(nameValue[1].value); // return entered input email value
在控制台显示的输出是
HTMLCollection(2) [input, input, name: input, email: input]0: input1: inputlength: 2email: inputname: input__proto__: HTMLCollection
<input type="text" name="name">
name
<input type="text" name="email">
email
document querySelector获取html元素的值
querySelector 是文档对象中的一个方法，它允许用不同的选择器选择元素。输入元素的声明如下
<input type="text" name="name" id="name" class="nameClass">
重要的一点是
- document.querySelector("input") 选择带有标签名称的输入元素
- document.querySelector(".class"), 获得带有css类名称选择器的输入元素
- document.querySelector("#name"), 获得带有id选择器的输入元素
let nameValue = document.querySelector(".nameClass");
console.log(nameValue); // return input element
console.log(nameValue.value); // return input value
而输出是
<input type="text" name="name" id="name" class="nameClass">
name
document querySelectorAll，获得所有元素
querySelectorAll 返回数组NodeList 与querySelector一样，这也是用来用CSS选择器选择元素的。
let nameValue = document.querySelectorAll("input");
console.log(nameValue); // return input element
console.log(nameValue[0].value); // return input value
Jquery选择器读取输入元素值的例子
以下是examples to get input form element in jquery using multiple selectors 。
首先，请在html页面中包含jquery库cdn
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
其次，jquery ready必须被初始化，一旦DOM被加载到浏览器上就会被执行
$(document).ready(function() {
// include selectors code to read input value
})
输入元素的css类选择器
<input type="text" name="name" class="inputClass" value="" id="inputId"/>
和jquery代码是
var inputValue = $('.inputClass').val();
输入元素选择器获取值
输入文本被定义，其值通过元素的名称用jquery css选择器读取
<input type="text" name="name" class="inputClass" value="" id="inputId"/>
和jquery代码是
var inputValue = $("input:text").val();
Jquery id 输入选择器
用id属性声明输入文本，用jquery css选择器读取它的值
<input type="text" name="name" class="inputClass" value="" id="inputId"/>
和jquery代码是
var inputValue = $("#inputId").val();
读取输入文本值的输入事件
下面是使用button click 和keypress events
下面是一个用keyUp事件读取输入值的例子
<input type="text" name="name" onkeyup="keyUpEvent(this.value)">
和函数声明
<script>
function keyUpEvent(value) {
console.log(value);
}
</script>
