The main purpose of this article is to introduce form-related knowledge, such as basic knowledge of forms, related usage of text box scripts, related usage of select box scripts, and other knowledge. Although in modern web development, form default behavior is rarely used to submit form data. Instead, the default behavior is disabled, and then Ajax is used to asynchronously submit form data through a POST request. But this does not mean that forms are not important anymore. Forms are still the fastest way to submit forms because JavaScript provides many properties and methods that allow us to quickly obtain the values of form fields. Therefore, it is still necessary to understand and master the form.
form form
Attributes
Method
Event
form form fields (form fields include input, button, select, textarea, the following attributes method events Common to all form fields)
Properties
Method
Event
Text box (input, textarea)
document.forms to get all form elements in HTML, and a NodeList object will be returned.
document.forms[0].elements Returns an array-like object, including all items under the form Form fields. It can be accessed through the name attribute or index of the form field.
let form = document.forms[0] form.element[0] === form.element['index-0']
<input type="submit" value='提交' /> <button type='submit'>提交</button> <input type="image" src='pic.png' />
. Browsers that support this event include IE10+, Chrome, and Firefox. Therefore, autofocus of supported browsers will return true, and if it is not supported, it will return an empty string.
document.addEventLitener('DOMContentLoaded', e => {
let input = docuemnt.querySelector('.input-1')
input.focus()
}, false)Event
let input = document.querySelector('.input-0')
input.addEventListener('focus', e => {
e.target.style.backgroundColor = '#ccc'
}, false)
input.addEventListener('blur', e => {
e.target.style.backgroundColor = '#fff'
}, false)Change event: For input and textarea elements, the change event is triggered when they change from gaining focus to losing focus and the value changes. For the select element, the change event will be triggered whenever the value changes. In other words, the change event will be triggered without losing focus. This detail needs attention.
Text box (input, textarea)
Properties
// type为number时，可以指定min,max,step(表示某个值得倍数)属性 <input type="number" min='0' max='100' step='5' name='count'> // 此时正则默认添加了^, $，即以下正则等于'^\d+$' <input type='text' pattern='\d+'>
1.select方法：input和textarea元素都支持selct方法。这个方法不接受任何参数，表示选择某个文本框元素的所有文本
// 当input元素获得焦点是选择文本
let input = document.querySelector('.input-1')
input.addEventListener('focus', e => {
e.target.select()
}, false)2.setSelectionRange方法：这个方法用于选择部分文本内容。接受两个参数，起始位置和结束位置。HTML5新增的方法。IE9+以上浏览器支持。
// 当input获得焦点时，选择文本中的第二个值
let input = document.querySelector('.input-1')
input.addEventListener('focus', e => {
let target = e.target
console.log(target.setSelectionRange(1, 2))
}, false)3.select事件：当文本框元素中的文本被选中时，就会触发select事件。只要选中文本就会触发，不需要全选。
4.selectionStart, selectionEnd属性：这两个属性用于或者用户选中的文本内容。因此，可以与select事件结合使用，获取用户选中的文本内容。HTML5新增的两个属性。IE9+以上浏览器支持。
let input = document.querySelector('.input-1')
input.addEventListener('select', e => {
let target = e.target
let start = target.selectionStart
let end = target.selectionEnd
console.log(target.value.slice(start, end))
}, false)文本框的过滤输入主要是某些文本的输入是有条件的。比如说需要input元素中只允许输入数字。这时候就需要用到文本的过滤。基本思路如下
1.通过监听keypress事件，判断输入时的字符是否是数字。通过charCode判断。keypress事件会在用户按下键盘上的【字符键】时触发。
2.如果不是，则取消默认行为，即取消文本的输入。
let input = document.querySelector('.input-1')
input.addEventListener('keypress', e => {
let charCode = e.charCode
if (!/[\d+.+-]/g.test(String.fromCharCode(charCode))) {
e.preventDefault()
}
}, false)此方法通过charCode属性来判断用户输入的字符是否是数字字符，如果是则可以输入，如果不是则禁止输入。这里要注意的是，不能通过input的value属性来判断。因为keydown和keypress事件会在value改变之前触发，而keyup事件则是在value发生改变之后触发。因此，keypress获取value值是上一次的值，但是keypress事件可以获取到按下键盘时的charCode属性，然后通过String对象的fromCharCode转成对应的字符，根据此字符做一次正则验证即可。同时，charCode属性只有在keypress事件才存在，在keydown和keyup事件中都会返回0。
这种应用主要用于手机号码上。如手机号码可以分为'334'的结构。因此可以创建三个input，当输入完毕时自动切换焦点到下一个input上。
// 必须设置最大值
<input type="text" name='text1' maxlength="3">
<input type="text" name='text2' maxlength="3">
<input type="text" name='text3' maxlength="4">
// 当value的length等于maxleng时，发生跳转
function judge (len, max, target, form) {
if (len === max) {
let length = form.elements.length
for (let i = 0; i < length; i++) {
if (target === form.elements[i]) {
if (form.elements[i + 1]) {
form.elements[i + 1].focus()
}
}
}
}
}
// 给三个input绑定keyup事件，通过事件代理方式。
document.addEventListener('keyup', e => {
let target = e.target
let form = target.form
let len = target.value.length
let maxLen = target.maxLength
switch (target.name) {
case 'text1':
judge(len, maxLen, target, form)
break
case 'text2':
judge(len, maxLen, target, form)
break
case 'text3':
judge(len, maxLen, target, form)
break
}
}, false)选择框是通过select和option元素组合而成的。除了表单字段共有的属性和方法之外，在这两个元素上提供了其他的属性和方法。目的是为了更加方便的操作选择框元素。
add(newOption, targetOption)：在select元素上有add方法，向select元素插入新的option元素。传入两个参数：新的option元素和目标option元素。
multiple属性: 是否允许多项选择。如果未添加此属性，则select元素的type属性为'select-one'。否则为'select-multiple'。
options属性：取得该select元素下的所有options元素。返回一个类数组对象。
selectedIndex属性: 选中options元素的索引值。
size属性: 可见的行数
value属性: 发送到服务器的值，如果没有这个属性，则会取innerText的值。
index: 索引值
label: 当前选项的标签
selected: 被选中的option元素
text: 文本
value: 发送到服务器的值
The above is the detailed content of Detailed introduction to forms in JavaScript. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
