Javascript文本框脚本实现方法解析
在HTML中，有两种方式来表现文本框：一种是使用元素的单行文本框，另一种是使用之间。
选择文本
上述两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。在调用select()方法时，大多数浏览器（Opera除外）都会将焦点设置到文本框中。这个方法不接受参数，可以在任何时候被调用。
vartextbox=document.forms[0].elements["textbox1"];
textbox.select();
在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时候。因为这样做可以让用户不必一个一个地删除文本。
选择（select）事件
与select()方法对应的，是一个select事件。在选择了文本框中的文本时，就会触发select事件。不过，到底什么时候触发select事件，还会因浏览器而异。
取得选择的文本
虽然通过select事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。HTML5通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。该规范采取的办法是添加两个属性：selectionStart和selectionEnd。这两个属性中保存的是基于0的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）。因此，要取得用户在文本框中选择的文本，可以使用如下代码。
functiongetSelectedText(textbox){
returntextbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}
IE8及更早的版本中有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息；兼容IE8的写法
functiongetSelectedText(textbox){
if(typeoftextbox.selectionStart=="number"){
returntextbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}elseif(document.selection){
returndocument.selection.createRange().text;
}
}
选择部分文本
现在除select()方法之外，所有文本框都有一个setSelectionRange()方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引（类似于substring()方法的两个参数）。
textbox.value="Helloworld!"
//选择所有文本
textbox.setSelectionRange(0,textbox.value.length);//"Helloworld!"
//选择前3个字符
textbox.setSelectionRange(0,3);//"Hel"
//选择第4到第6个字符
textbox.setSelectionRange(4,7);//"ow"
E8及更早版本支持使用范围选择部分文本。要选择文本框中的部分文本，必须首先使用IE在所有文本框上提供的createTextRange()方法创建一个范围，并将其放在恰当的位置上。然后，再使用moveStart()和moveEnd()这两个范围方法将范围移动到位。不过，在调用这两个方法以前，还必须使用collapse()将范围折叠到文本框的开始位置。此时，moveStart()将范围的起点和终点移动到了相同的位置，只要再给moveEnd()传入要选择的字符总数即可。最后一步，就是使用范围的select()方法选择文本，如下面的例子所示。
textbox.value="Helloworld!";
varrange=textbox.createTextRange();
//选择所有文本"Helloworld!"
range.collapse(true);range.moveStart("character",0);
range.moveEnd("character",textbox.value.length);
range.select();
//选择前3个字符"Hel"
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",3);
range.select();
//选择第4到第6个字符"ow"
range.collapse(true);
range.moveStart("character",4);
range.moveEnd("character",3);
range.select();
兼容IE8的写法
functionselectText(textbox,startIndex,stopIndex){
if(textbox.setSelectionRange){
textbox.setSelectionRange(startIndex,stopIndex);
}elseif(textbox.createTextRange){
varrange=textbox.createTextRange();
range.collapse(true);
range.moveStart("character",startIndex);
range.moveEnd("character",stopIndex-startIndex);
range.select();
}
textbox.focus();
}
操作剪贴板
IE是第一个支持与剪贴板相关事件，以及通过JavaScript访问剪贴板数据的浏览器。HTML5后来也把剪贴板事件纳入了规范。
- beforecopy：在发生复制操作前触发。
- copy：在发生复制操作时触发。
- beforecut：在发生剪切操作前触发。
- cut：在发生剪切操作时触发。
- beforepaste：在发生粘贴操作前触发。
- paste：在发生粘贴操作时触发。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。