javascript 文本框

在HTML中，有两种方式表示文本框：一种是用<input>标签，其type值设置为text，这种设出来使单行文本框，另一种是多行文本框，使用<textarea>。他们之间有一些重要的区别。

<input>标签：通过设置size特性，能够指定显示的字符数；通过value特性，可以设置初始值；maxlength能够设置能够显示的最大字符数；

<textarea>通过设置rows,cols特性可以设置行列；与<input>标签不同，<textarea>的初始值不是在特性里设置的，而是由<textarea>标签包围；而且，不能给<textarea>设置最大字符数。

 

但素，他们之间还是有一个共同点的！他们都会将用户输入的value值保存在value属性中，通过元素的value属性，可以访问和修改value值。

var textbox=document.forms[0].elements["textbox1"];

alert(textbox1.value);

textbox1.value="some new text";

 

建议使用上面的方法设置和修改value值，不建议使用DOM方法，即不要用setAttribute()方法设置<textarea>的特性，也不要修改<textarea>的第一个子节点。

一、 选择文本（select()）

上面两种文本框都支持select()方法，这个方法会选择文本框中所有的文本。调用select()时，大多数浏览器都会将焦点设置到文本框中（除欧朋）。在文本框获得焦点时，选择所有文本，在文本框中有默认值时，避免了用户一个一个地删除，提升表单的易用性。

EventUtil.addHandler(btn,”focus”,function(evnet){

event=EventUtil.getEvent(event);

var target=EventUtil.getTarget(event);

target.select();

});

二、 选择事件（select）

与select方法对应的，有一个select事件，该方法发生在两种情况下：文本框中的文本被选择时和调用select()方法时。然而，触发事件的时刻却因浏览器而异。IE及更早的版本只要用户选择了一个字符，（不必释放鼠标）就会触发select事件；IE9+,Opera,FF,Safari浏览器只有用户选择了文本（并且释放鼠标），才会触发select事件。

var textarea=document.forms[0].elements["textarea"];

EventUtil.addHandler(textarea,"select",function(event){

alert("Textarea Value"+textarea.value);

});

三、 取得选择的文本（所有的文本）

HTML5添加了两个属性：selectionStart,selectionEnd，用以表示所选择文本的范围，这两个属性有IE9+,ff,Safari,Chrome,Opera支持；IE8及以前版本就使用document.selection对象，保存着用户选择的文本信息，要取得选择的文本必须先创建一个范围，再将文本从范围中提取出来。

要跨浏览器取得选择的文本，可以用以下的代码：

function getSelectedText(textbox){

if(typeof textbox.selectionStart=="number"){

return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);

}else if(document.getSelection){

return document.selection.createRange().text;

}

}

四、 选择文本（部分文本）

HTML5提供了选择部分文本的方法：setSelectionRange(),传入两个参数，一个是要选择的第一个字符的索引，一个是要选择的最后一个文本的下一个字符的索引。

textbox.value="hello world!";

textbox.setSelectionRange(0,textbox.value.length);//"hello world!"

textbox.setSelectionRange(0,3);//"hel"

textbox.selectionRange(4,7);//"o w"

 

IE8及更早版本支持使用范围选择部分文本。必须先提供createTextRange方法创建一个范围，再用collapse()方法将范围折叠到文本框的开始位置，接着moveStart()将起点和终点移到了相同位置，然后moveEnd()传入要显示的字符总数，最后select()选择文本。当然，最重要的一步，让文本框获得焦点，在文本框中才能看到文本被选择的效果。

textbox.value="hello world!";

var range=textbox.createTextRange();

range.collapse();

range.moveStart("character",4);

range.moveEnd("character",3);

range.select();//”o w"

跨浏览器选择部分文本：

function selectText(textbox,startIndex,endIndex){

if(textbox.setSelectionRange){

textbox.setSelectionRange(textbox,startIndex,endIndex);

}else if(textbox.createTextRange){

var range=textbox.createTextRange;

range.collapse(true)

range.moveStart("character",startIndex);

range.moveEnd("charcter",endIndex-startIndex);

range.select();

}

textbox.focus();

}

五、过滤输入（输入的文本包含或不包含某些字符）

有些情况下，我们对用户输入的文本有所要求，例如电话号码只能是数字。在极端的情况下利用下面的代码可以屏蔽所有按键操作，从而把文本设置成只读模式。

EventUtil.addHandler(

textbox,"keypress",function(event){

event=EventUtil.getEvent(event);

EventUtil.preventDefault(event);

}

);

进一步地，如果是像电话号码那样只想屏蔽特定的字符，则可以检测keypress事件对应的字符编码，然后再决定如何响应。

EventUtil.addhandler(

textbox,"keypress",function(event){

event=EventUtil.getEvent(event);

var charCode=EventUtil.getCharCode(event);

if(!/\d/.test(String.fromCharCode(charCode))){

EventUtil.preventDefault();

}

}

);

事情并咩有这么简单，有些浏览器对于非字符键也会触发keypress事件，像FF，Safari（3.1版本以前）对向上键，向下键，会触发keypress键，那么怎么解决呢？

在FF中，所有由非字符键触发的keypress事件，对应字符编码均为0，在Safari3以前的版本均为8。因此要屏蔽这些键，就要求字符编码不是这两个数字，为了让代码更为通用，可以设置为字符编码不超过10，修改如下：

EventUtil.addhandler(

textbox,"keypress",function(event){

event=EventUtil.getEvent(event);

var charCode=EventUtil.getCharCode(event);

if(!/\d/.test(String.fromCharCode(charCode))&&charCode>9){

EventUtil.preventDefault();

}

}

);

这样还不够！如果用户要复制黏贴文本到文本框，要用到ctrl键，上面的代码的无疑已经屏蔽了ctrl键！因此，还要添加一个检测条件，确保用户没有按下ctrl键。

EventUtil.addhandler(

textbox,"keypress",function(event){

event=EventUtil.getEvent(event);

var charCode=EventUtil.getCharCode(event);

if(!/\d/.test(String.fromCharCode(charCode))&&charCode>9&&!event.ctrlKey){

EventUtil.preventDefault();

}

}

);

至此，检测包含非数字字符的三个条件都齐全了！

六、操作剪贴板（Opera不支持）

 

我们仔细讲解下如何访问剪贴板中的数据。

要访问剪贴板中的数据，可以访问clipboardData对象。IE中，这个对象是wiondow的，在Safari,FF,Chrome中，这个对象是event对象的属性。

这个对象有三个方法:getData(),setData(),clearData()。

在IE中，getData()有两种格式，”text”和”url”;在FF,Safari,Chrome中，这个参数是一种MIME类型，只有text/plain（可以用text代替）。

setData()有两个参数，一个是数据类型，一个是值。IE照样是text或url,其他的浏览器是text/plain。但是！Safari和Chrome的setData()不支持text,只能用text/plain！也就是说，getData()方法可以统一为text,而getData()一定要按浏览器差异分开来编写代码！

var EventUtil={

//省略代码

getClipboardText:function(event){

var clipboardData=(event.clipboardData||window.clipboardData);

return clipboardData.getData("text");

},

setClipboardText:function(event,value){

if(event.clipboardData){

return event.clipboardData.setData("text/plain",value);

}else if(window.clipboardData){

return window.clipboardData.setData("text",value);

}

},

//省略代码

}

与剪贴板相关的事件其实有六个，HTML5后来把他们列入了规范。

Beforecopy,beforecut,,beforepaste,paste,copy,cut

由于没有针对操作剪贴板的标准，这些事件及相关对象因浏览器而异。这里就不仔细讲了。