文本框脚本
在HTML中文本框有两种实现方式:
- <input>
- <textarea>
这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别
对于<input>来说,如果需要展现一个文本框则需要将 type 特性设置为“text”
通过设置其 size 特性可以指定文本框中能够显示的最大字符数
通过 value 特性则可以设置文本框的初始值
通过设置 maxlength 特性可以设置文本框接收的最大字符数
<input type="text" size="25" maxlength="50" value="initial value">
如上方代码所示,创建了一个能显示25个字符,最多接收50个字符,初始值为 initial value 的文本框
相对于<input>,<textarea>元素则会呈现一个多行文本框,要指定文本框的大小则通过两个特性来进行限制
- cols:文本框的字符列数
- rows:文本框的字符行数
而初始值的设值则需要将内容放在两个标签之间
如:
<textarea>initial value</textarea>
无论这两种展现方法在表现形式上存在多大的区别,他们都会将用户输入的值保存在 value 特性中
但是需要注意的是:最好不要使用DOM方法来获取或者修改值(即通过setAttribute()等方法来修改特性的值),因为对 value 特性的修改不一定会展示在DOM中
选择文本
上述两种文本框都支持 select() 方法,这个方法用于选择文本框中的文本
在主流浏览器中,对文本框调用 select() 方法时会将焦点设置为文本框
该方法不接受参数,可以在任何时候被调用
调用时会选中文本框中的所有文本
通常来说这种方法用于让文本框获得焦点时自动选中所有文本
代码如下:
var textarea = document.getElementsByTagName('textarea')[0]; textarea.onfocus = function(){
this.select();
}
这种做法可以提供较好的用户体验
select事件
与select方法对应的事件是 select 事件
在选择了文本框中的文本时就会触发该事件
不过在不同的浏览器中该事件的触发机制有所不同
一部分浏览器要在用户选择了文本,且释放鼠标后才会触发
剩余的部分(以IE8以下的低版本IE为主)只要选择了文本就会触发
取得文本
虽然通过 select 事件我们可以知道用户选择了文本
但是无法获取用户选择的文本内容,所以HTML5对此进行了拓展
对文本框添加了如下属性:
- selectionStart:选中文本开头的偏移量(从0开始)
- selectionEnd:选中文本末尾的偏移量
通过这两个属性我们就可以获取用户选中的文本
textarea.addEventLinstener("select",function(event){
return this.value.substring(this.selectionStart,this.selectionEnd);
},false)
选择部分文本
HTML5也为选择文本框中的部分文本提供了解决方案
即 setSelectionRage()方法
该方法接收两个参数:第一个字符串的偏移量,最后一个字符的偏移量,类似于上面的 selectionStart 和 selectionEnd
但是对于低版本的IE要实现上述功能则需要使用范围
所以该方法的跨浏览器实现如下:
function selectText(textbox,startIndex,stopIndex){
if(textbox.selectionRange){
textbox.selectionRange(startIndex,stopIndex);
}else if(textbox.createTextRange){
var range = textbox.createRange();
range.collapse(true);
range.moveStart("character",startIndex);
range.moveEnd("character",stopIndex-startIndex);
range.select();
} textbox.focus();
}