Javascript实现文本框脚本的方法

这篇文章将为大家详细讲解有关Javascript实现文本框脚本的方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

在HTML中,有两种方式来表现文本框:一种是使用& lt; input>元素的单行文本框,另一种是使用& lt; textarea>的多行文本框。这两个控件非常相似,而且多数时候的行为也差不多。不过,它们之间仍然存在一些重要的区别。

相对而言,& lt; textarea>元素则始终会呈现为一个多行文本框。要指定文本框的大小,可以使用行和关口特性。其中,行特性指定的是文本框的字符行数,而关口特性指定的是文本框的字符列数(类似于& lt; inpu>元素的大小特性)。与& lt; input>元素不同,& lt; textarea>的初始值必须要放在& lt; textarea>和& lt;/textarea>之间。

<强>选择文本

上述两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本。在调用select()方法时,大多数浏览器(除歌剧外)都会将焦点设置到文本框中。这个方法不接受参数,可以在任何时候被调用。

var文本框=document.forms [0] . elements [“textbox1"];
textbox.select ();

在文本框获得焦点时选择其所有文本,这是一种非常常见的做法,特别是在文本框包含默认值的时候,因为这样做可以让用户不必一个一个地删除文本。

<强>,# 8203;选择(select)事件

与选择()方法对应的,是一个选择事件。在选择了文本框中的文本时,就会触发选择事件。不过,到底什么时候触发选择事件,还会因浏览器而异。

<>强取得选择的文本

虽然通过选择事件我们可以知道用户什么时候选择了文本,但仍然不知道用户选择了什么文本.HTML5通过一些扩展方案解决了这个问题,以便更顺利地取得选择的文本。该规范采取的办法是添加两个属性:selectionStart和selectionEnd。这两个属性中保存的是基于0的数值,表示所选择文本的范围(即文本选区开头和结尾的偏移量),因此,要取得用户在文本框中选择的文本,可以使用如下代码。

函数getSelectedText(文本框){
　　返回textbox.value.substring(文本框。selectionStart textbox.selectionEnd);
　　}

IE8及更早的版本中有一个文档。选择对象,其中保存着用户在整个文档范围内选择的文本信息;兼容IE8的写法

函数getSelectedText(文本框){
　　如果文本框。selectionStart==皀umber") {
　　返回textbox.value.substring(文本框。selectionStart textbox.selectionEnd);
　　}else if (document.selection) {
　　返回document.selection.createRange。text ();
　　}
　　}

<>强选择部分文本

现在除选择()方法之外,所有文本框都有一个setSelectionRange()方法。这个方法接收两个参数:要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引(类似于substring()方法的两个参数)。

文本框。值=https://www.yisu.com/zixun/癏ello world !”
//选择所有文本
文本框。setSelectionRange (0, textbox.value.length);//癏ello world !”“
//选择前3个字符
文本框。setSelectionRange (0, 3);//癏el"
//选择第第四到第6个字符
文本框。setSelectionRange (4、7);//皁 w"

E8及更早版本支持使用范围选择部分文本。要选择文本框中的部分文本,必须首先使用IE在所有文本框上提供的createTextRange()方法创建一个范围,并将其放在恰当的位置上,然后,再使用moveStart()和moveEnd()这两个范围方法将范围移动到位。不过,在调用这两个方法以前,还必须使用崩溃()将范围折叠到文本框的开始位置。此时,moveStart()将范围的起点和终点移动到了相同的位置,只要再给moveEnd()传入要选择的字符总数即可。最后一步,就是使用范围的选择()方法选择文本,如下面的例子所示。

文本框。值=https://www.yisu.com/zixun/癏ello world !”; 　　var=textbox.createTextRange范围();//选择所有文本“Hello world !” 　　range.collapse(真正的);的范围内。moveStart("性格",0); 　　的范围内。moveEnd(“字符”,textbox.value.length); 　　range.select (); 　　& # 8203;//选择前3个字符“冥界” 　　range.collapse(真正的); 　　的范围内。moveStart("性格",0); 　　的范围内。moveEnd(“字符”,3); 　　range.select (); 　　& # 8203;//选择第第四到第6个字符“o w” 　　range.collapse(真正的); 　　的范围内。moveStart(“字符”,4); 　　的范围内。moveEnd(“字符”,3); 　　range.select ();

Javascript实现文本框脚本的方法