JavaScript文本框脚本编写的注意事项

作者：闭包旅人时间：2026-10-29 20:51:40浏览：186

本文详细解析JavaScript中文本框脚本编写的核心注意事项，涵盖input与textarea的属性差异、select()方法与select事件的处理机制、跨浏览器文本选择兼容方案、基于keypress的输入过滤技巧、剪贴板事件的访问与限制，以及HTML5约束验证API的应用。

HTML文本框基础属性

在HTML中，表现文本框主要有两种方式。

第一种是使用input元素的单行文本框，第二种是使用textarea的多行文本框。

若使用input方式，必须添加type属性，并将其设置为“text”。

size特性可用于指定文本框内能够显示的字符数。
value属性用于设置文本框的初始值。
maxlength特性则用于指定文本框内可以接受的最大字符数。

textarea的初始值必须放置在开始标签和结束标签之间。

cols属性定义文本框的字符行数；
rows属性定义文本框的字符列数；

需要注意的是，不能在HTML中直接给textarea指定最大字符数限制。

文本选择与事件处理

一、选择文本

上述两种文本框均支持

select()方法，该方法主要用于选中文本框中的所有文本，不接受任何参数。
与该方法对应的select事件，在文本框中的文本被选中时触发。

1、select()方法

以下代码展示了只要文本框获得焦点，就会选择全部文本的逻辑：


var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value = "input your firstName";
//设置事件
textBox.addEventListener("focus", function () {
  event.target.select();
});

2、select事件

该事件的触发时机如下：

一般情况下，只有用户选择了文本（且释放鼠标）后，才会触发select事件；
在IE8及更早版本中，只要用户选择了一个字母（无需释放鼠标），就会触发select事件；
在调用select()方法时也会触发该事件；

例如：


var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value = "input your firstName";
//设置事件
textBox.addEventListener("select", function () {
  console.log("selected");
});

3、取得选择的文本

可以利用两个属性：

selectionStart
selectionEnd

这两个属性保存的是基于0的数值，表示所选择文本的范围（偏移量）。因此，要取得用户选择的文本框中的文本，可以使用如下代码：


var textBox = document.getElementById("myForm").elements["firstName"];
//设置默认值
textBox.value = "input your firstName";
//设置事件
textBox.addEventListener("select", function () {
  var selected = textBox.value.substring(textBox.selectionStart,textBox.selectionEnd);
  console.log(selected); 
});

另外，也可以用该属性来设置当获得焦点时默认全选的状态：


textBox.addEventListener("focus", function () {
  textBox.selectionStart = "0";
  textBox.selectionEnd = textBox.value.length;
});

或者：


textBox.addEventListener("focus", function () {
  textBox.blur();
});

但是，使用selectionStart/End属性时，IE8不支持，但支持另一个名为

document.selection对象，该对象保存着用户在整个文档范围内选择的文本信息

获取选择文本的兼容版本代码为：


function getSelectedText (textbox) {
  if (typeof textbox.selectionStart == "number") {
    return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
  }else if (document.selection) {
    return document.selection.createRange().text;
  }
}

部分文本选择与兼容方案

二、选择部分文本

选择部分文本的方法是：

setSelectionRange()方法。该方法接收两个参数：要选择第一个字符的索引和最后一个字符的索引。例如阻止用户选择：


textBox.addEventListener("focus", function () {
  textBox.setSelectionRange(0,0);
});
textBox.addEventListener("select", function () {
  textBox.setSelectionRange(0,0);
});

要调用setSelectionRange()之前或之后立即将焦点设置到文本框。而在IE中使用的方式是适用范围来解决文本的问题：


var range = textBox.createTextRange();
range.collapse(true); //范围折叠到开头
range.moveStart("Character",0);
range.moveEnd("Character",textBox.value.length);
range.select();

兼容版本代码较为常用：


function selectText(textbox, startIndex, stopIndex) {
  if (textbox.setSelectionRange) {
    textbox.setSelectionRange(startIndex, stopIndex);
  } else if (textbox.createTextRange()) {
    var range = textbox.createTextRange();
    range.collapse(true); //范围折叠到开头
    range.moveStart("Character", startIndex);
    range.moveEnd("Character", stopIndex);
    range.select();
  };
}

输入过滤与屏蔽字符

三、过滤输入

1、屏蔽字符

以下代码仅允许输入数字：


var textBox = document.getElementById("myForm").elements["firstName"];
textBox.autofocus = true;
textBox.addEventListener("keypress", function () {
  if (!/\d/.test(String.fromCharCode(event.charCode))) { //仅输入数字
    event.preventDefault();
  };
});

但是部分浏览器会对向上、下键、退格键触发keypress事件，因此需要对这些常用的操作键取消禁止，只要不屏蔽那些字符编码小于10的键即可：


textBox.addEventListener("keypress", function () {
  if (!/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) { //仅输入数字
    event.preventDefault();
  };
});

剪贴板事件与数据访问

四、操作剪贴板

以下是6个剪贴板事件

beforecopy：在发生复制操作前触发
copy：在发生复制时触发
beforecut：在发生剪贴前操作
cut：在发生加贴时操作
beforepaste：在发生黏贴操作前触发
paste：在发生黏贴操作时触发

例如设置禁止拷贝：


//拷贝之前提示禁止拷贝
textBox.addEventListener("beforecopy", function() {
  textBox.value = "do not copy";
});
//拷贝时禁止拷贝
textBox.addEventListener("copy", function() {
  event.preventDefault();
});

要访问剪贴板中的数据，可以使用clipboardData对象。在IE中，这个对象是window对象的属性；在Firefox、Safari和Chrome中，这个对象是相应event对象的属性。在IE中可以随时访问该对象；但在其他浏览器中，只有在处理剪贴板事件期间才有效。

这个clipboardData对象有三个方法：

getData()
setData()
clearData()

getData()接收一个参数，即要取得数据的格式（IE中有两种数据格式：text和URL；在其他浏览器中这个参数是一种MIME类型；不过可以用text代替text/plain）。

setData()接收两个参数，即数据类型和要放在剪贴板中的文本。（第一个参数中，IE支持text和URL；第二个参数中Chrome和Safari不支持text类型）；这两个浏览器在成功将文本放到剪贴板中后，都会返回true；否则，返回false：


function getClipboardText(event) {
  var clipboardData = (event.clipboardData || window.clipboardData);
  return clipboardData.getData("text");
}

function setClipboardText(event, value) {
  if (event.clipboardData) {
    return event.clipboardData.setData("text/plain", value);
  } else if (window.clipboardData) {
    return window.clipboardData.setData("text", value);
  }
}

目前浏览器逐渐收紧对访问剪贴板的操作。

自动切换焦点实现

五、自动切换焦点

理论上就是在前一个文本框中的字符打到最大数量后，自动将焦点切换到下一个文本框：

DOM实现方式：


<form action="">
  <input type="text" name="tel11" id="txtTel1" maxLength="3">
  <input type="text" name="tel12" id="txtTel2" maxLength="3">
  <input type="text" name="tel13" id="txtTel3" maxLength="4">
  <input type="submit" name="btn" id="btn" value="submit">
</form>

JS实现方式：


var textbox1 = document.getElementById("txtTel1");
var textbox2 = document.getElementById("txtTel2");
var textbox3 = document.getElementById("txtTel3");

textbox1.addEventListener("keyup", tabForward);
textbox2.addEventListener("keyup", tabForward);
textbox3.addEventListener("keyup", tabForward);

function tabForward() {
  var target = event.target;
  //当value长度等于最大值的时候
  if (target.value.length == target.maxLength) {
    var form = target.form;
    //遍历所在的form表单中的元素
    for (var i = 0, len = form.elements.length; i < len; i++) {
      //如果该元素是目标元素
      if (form.elements[i] == target) {
        //并且该元素的下一个元素为true 其他条件
        if ((form.elements[i + 1]) && (form.elements[i + 1].nodeType == 1) && (form.elements[i + 1].tagName.toLowerCase() == "input") && (form.elements[i + 1].type == "text")) {
          //则下个元素获得焦点
          form.elements[i + 1].focus();
        }
      }
    };
  }
}

HTML5约束验证API应用

六、HTML5约束验证API

1、必填字段required属性

在必填字段中添加属性required。它适用于input、textarea、select字段。使用以下代码可以检测浏览器是否支持required属性：


var isRequiredSupported="required" in document.createElement("input");

2、其他输入类型

input的type属性增加了“email”和“url”；各浏览器也都为它们增加了定制的验证机制：


var input = document.createElement("input");
input.type = "email";
var isEmailSupported = (input.type == "email");

3、数值范围

除了“email”和“URL”，HTML5还定义了另外几个输入元素。这几个元素都要求填写基于数字的值：“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week”、“time”。目前浏览器对这些类型支持并不好，如果真想使用的话要小心。

对于这些数值类型的输入元素可以指定min属性、max属性、step属性。同时这些数值类型元素还有两个方法：stepUp()、stepDown()。都接受一个参数，要在当前基础上加上或减去的数值。

DOM实现方式：


<form action="">
  <input type="range" name="tel14" id="txtTel4" required min="10" max="20" step="1">
  <input type="button" value="up" id="up">
  <input type="text" id="output">
  <input type="submit" name="btn" id="btn" value="submit">
</form>

JS实现方式：


var input = document.getElementById("txtTel4");
var up = document.getElementById("up");

input.addEventListener("mousemove", function () {
  var output = document.getElementById("output");
  output.value = input.value;
});
up.addEventListener("click", function () {
  //点击value值以2为单位增加
  input.stepUp(2);
  var output = document.getElementById("output");
  output.value = input.value;
});

3、输入模式

HTML5新增了pattern属性，这个属性的值是一个正则表达式，用于匹配文本框中的值。


<input type="text" id="number" pattern="\d{3}">

var num = document.getElementById("number");
console.log(num.pattern); //\d{3}

可以使用以下代码来检测浏览器是否支持pattern属性：


var isPatternSupported="pattern" in document.createElement("input");

4、检测有效性

使用checkValidity()方法可以检测表单中的字段是否有效。所有表单的字段都有这个方法，如果检查有效返回true。


<form action="">
  <input type="text" pattern="w" id="name" required>
  <input type="number" max="10" id="num" required>
  <input type="button" id="check" value="check">
  <input type="submit" id="submit" value="submit" disabled>
</form>

var form = document.forms[0];
var name = document.getElementById("name");
var number = document.getElementById("num");
var check = document.getElementById("check");
var submit = document.getElementById("submit");

check.addEventListener("click", function () {
  console.log(form.checkValidity()); //检测整个表单是否正确
  if (form.checkValidity()) {
    submit.removeAttribute("disabled");
    check.disabled = true;
  }else{
    alert("请检查表单");
  }
});

input的validity属性会给出什么字段有效和无效的具体信息。


var inputName = document.getElementById("inputName");
inputName.onblur = function() {
  if (inputName.checkValidity()) {
    inputName.style.color = "white";
    inputName.style.backgroundColor = "green";

  } else {
    inputName.style.color = "white";
    inputName.style.backgroundColor = "red";
    if (inputName.validity.patternMismatch) {
      inputName.value = "请填写正确的格式";
    }
  }
};
inputName.addEventListener("mouseenter", function () {
  inputName.focus();
  inputName.select();
});

validity主要包括下列属性：

customError：是否设置了setCustomValidity()；
patternMismatch：是否与pattern属性匹配；
rangeOverflow：是否比max值大；
rangeUnderflow：是否比min值小；
stepMisMatch：步长是否合理；
tooLong：是否超过了maxlength；
typeMismatch：是否不是mail类型和url类型；
valid：如果这里的其他属性都是false，返回true；
valueMissing：如果为required中没有值，返回true。

5、禁用验证

通过设置表单的novalidate属性，可以使表单不进行验证。用JS获取form之后，设置它的novalidate属性为true，会禁用表单验证。

在提交按钮上添加formnovalidate属性，会不验证提交表单。用JS获取submit按钮之后，设置它的formnovalidata属性为true，会禁用表单验证并提交。以上就是本文的全部内容，希望对大家的学习有所帮助。

作者最新文章

什么时候该用JS构造器：与工厂模式、字面量的选择对比

2026-11-05 16:18:22

推荐几款轻量级JS照片墙开源库及对比

2026-11-05 15:56:19

JavaScript递归写法有哪些常见陷阱及避免方法

2026-11-05 14:53:38

JS数组浅拷贝与深拷贝怎么选？场景与方法总结

2026-11-05 14:41:02

p5.js 中 setup() 和 draw() 函数的执行机制详解

2026-11-05 12:32:38