在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、屏蔽字符
下面的代码仅允许输入数字：