JavaScript 知识量：26 - 101 - 483
在HTML中有两种表示文本框的方式：单行使用<input>元素，多行使用<textarea>元素。这两种元素在功能和使用上有一些区别：
1. <input>：这是HTML中用于创建输入字段的最常用元素。使用type属性，可以指定输入的类型，例如"text"表示单行文本框。示例如下：
<input type="text" id="fname" name="fname">
2. <textarea>：这个元素用于创建多行文本框。它没有type属性，但有rows和cols属性，可以用来设置文本框的行数和列数。示例如下：
<textarea rows="4" cols="50"></textarea>
注意：<textarea>元素与<input>元素不同，它不会自动截断用户的输入。即使输入的内容超过了文本框的可见行数或列数，<textarea>也会保留并显示所有输入。
这两种元素都可以通过JavaScript进行操作，例如获取或设置值，添加事件监听器等。
文本框支持一个名为select()的方法，此方法用于全部选中文本框中的文本。select()方法是HTML中<input>和<textarea>元素都支持的方法。
在JavaScript中，可以通过以下方式使用select()方法：
// 获取文本框元素
var textInput = document.getElementById("myTextInput");
// 使用select()方法全选文本
textInput.select();在上面的示例中，假设HTML文档中有一个ID为"myTextInput"的文本框，通过使用JavaScript的getElementById()方法获取该文本框元素，然后调用select()方法，即可全选文本框中的文本。
输入过滤是一种确保用户输入符合特定要求的技术。在web开发中，对用户输入进行过滤是非常重要的，因为它可以帮助防止恶意代码注入（如跨站脚本攻击）和确保数据的完整性和一致性。
对于HTML的文本框，由于它只负责接收用户的输入，并不负责对输入的数据进行任何过滤或验证。因此，需要使用JavaScript来实现这种输入过滤。
以下是一个简单的例子，演示了如何使用JavaScript来验证一个文本框的输入：
<html>
<body>
<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<input type="submit" value="Submit">
</form>
<script>
// 获取文本框元素
var textInput = document.getElementById("fname");
// 为文本框添加事件监听器，当用户提交表单时进行验证
textInput.addEventListener('input', function(e) {
// 检查输入是否为数字
if (e.target.value.match(/\d+/)) {
alert('请输入字母，不要输入数字！');
e.target.value = e.target.value.replace(/\d+/, ''); // 移除输入的数字
}
});
</script>
</body>
</html>在上面的例子中，为文本框添加了一个事件监听器，监听用户每一次的输入。当用户输入的字符包含数字时，会弹出一个警告，并清空文本框中所有的数字。这样就可以确保用户只能输入字母，不能输入数字。
JavaScript可以通过很多方式来增强表单字段的易用性。最常用的是在当前字段完成时自动切换到下一个字段，特别是在处理一系列固定长度的输入字段时，如电话号码或社会保险号。这种做法减少了用户的操作，并使得填写表单的过程更加流畅。
以下是一个简单的示例，演示如何使用JavaScript实现这个功能：
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="phone1">电话号码1:</label><br>
<input type="text" id="phone1" name="phone1" onblur="moveNext()"><br>
<label for="phone2">电话号码2:</label><br>
<input type="text" id="phone2" name="phone2" onblur="moveNext()"><br>
<label for="phone3">电话号码3:</label><br>
<input type="text" id="phone3" name="phone3" onblur="moveNext()"><br>
<input type="submit" value="提交">
</form>
<script>
var currentField = 1;
function moveNext() {
var fields = ['phone1', 'phone2', 'phone3']; // 定义字段名称的数组
var currentFieldId = document.getElementById(fields[currentField]); // 获取当前字段的id
var nextFieldId = document.getElementById(fields[currentField + 1]); // 获取下一个字段的id
if (nextFieldId) { // 检查下一个字段是否存在
nextFieldId.focus(); // 将焦点移动到下一个字段
currentField++; // 更新当前字段的索引
} else { // 如果已经到达最后一个字段，将焦点移动回第一个字段
document.getElementById(fields[0]).focus();
}
}
</script>
</body>
</html>在上述示例中，首先创建了一个包含三个电话号码字段的表单。每个字段都有一个onblur事件处理器，该处理器会在字段失去焦点时触发。当一个字段失去焦点时，moveNext()函数会被调用。这个函数会将焦点移动到下一个字段，或者如果没有下一个字段，则将焦点移动回第一个字段。通过这种方式，用户可以在填写完一个字段后自动跳到下一个字段，而无需手动点击或触摸下一个字段。
HTML5为浏览器引入了一些新的表单验证功能，这些功能可以帮助开发者在用户提交表单数据之前，对数据进行校验。这些验证功能在客户端进行，能够在数据被发送到服务器之前检查数据的完整性和准确性。即使JavaScript不可用或加载失败也没关系。这是因为浏览器自身会基于指定的规则进行验证，并在出错时显示适当的错误消息（无须JavaScript）。这对于减轻服务器的压力，提高用户体验都非常有帮助。
以下是一些HTML5新增的表单验证功能：
输入类型(input types)：HTML5引入了一系列新的输入类型，如email, tel, number, range, date等，这些类型为浏览器提供了对特定类型输入数据的验证。例如，如果用户在email字段中输入了非电子邮件格式的数据，浏览器就会显示错误信息。
表单验证属性(Form validation attributes)：HTML5为输入元素增加了一些新的属性，如required, pattern, min, max, step等。这些属性可以让开发者对输入数据进行更复杂的验证。例如，pattern属性可以用来验证输入是否符合特定的正则表达式。
Constraint Validation API：这是一个JavaScript API，它允许开发者使用JavaScript代码来定义更复杂的验证规则。这个API提供了很多方法和属性，如checkValidity(), setCustomValidity(), validity.valid等，让开发者可以更灵活地控制验证过程。
占位符文本(Placeholder text)：HTML5为input元素增加了一个placeholder属性，这个属性可以用来显示用户未输入数据时的占位符文本。这个功能可以帮助用户理解输入字段的要求。
自动聚焦(Autofocus)：HTML5为input元素增加了一个autofocus属性，这个属性可以让浏览器在页面加载时自动将焦点聚焦到这个元素上。
表单关联(Form Association)：在HTML5之前，如果想让一个input元素与一个form元素关联起来，必须将form元素的id属性值复制到input元素的form属性中。HTML5引入了一个新的机制，允许在input元素上使用form属性来直接指定它所属的表单。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6