表单中文本框选择文本、选择部分文本及select事

发布时间：2022/01/10 丨 文章来源：未知 丨 浏览次数：

我前通过《js操作常见表单字段disabled、form、 name、readOnly、tabIndex等属性方法》介绍form中共有字段属性disabled、form、name、readOnly、tabIndex、type、value及blur、change、focus事件应用方法及注意事项,接下我们详细介绍表单中第一个元素，也是常用的元素文本输入框的详细使用方法。
? ? ? ?在 HTML 中，有两种方式来表现文本框：一种是使用元素的单行文本框，另一种是使用 的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍 然存在一些重要的区别。<br /> ? ? ? ?要表现文本框，必须将<input>元素的 type 特性设置为"text"。而通过设置 size 特性，可以指 定文本框中能够显示的字符数。通过 value 特性，可以设置文本框的初始值，而 maxlength 特性则用 于指定文本框可以接受的大字符数。如果要创建一个文本框，让它能够显示 25 个字符，但输入不能 超过 50个字符，可以使用以下代码：?<br /> ? ? ? ?<input type="text" size="25" maxlength="50" value="initial value"><br /> ? ? ? ?相对而言，<textarea>元素则始终会呈现为一个多行文本框。要指定文本框的大小，可以使用 rows 和 cols 特性。其中，rows 特性指定的是文本框的字符行数，而 cols 特性指定的是文本框的字符列数 （类似于<inpu>元素的 size 特性）。与<input>元素不同，<textarea>的初始值必须要放在 <textarea>和之间，如下面的例子所示。?
? ? ? ?initial value?
? ? ? ?另一个与的区别在于，不能在 HTML中给指定大字符数。<br /> ? ? ? ?无论这两种文本框在标记中有什么区别，但它们都会将用户输入的内容保存在 value 属性中。可 以通过这个属性读取和设置文本框的值，如下面的例子所示：?<br /> ? ? ? ?var textbox = document.forms[0].elements["textbox1"]; alert(textbox.value);?<br /> ? ? ? ?textbox.value = "Some new value";?<br /> ? ? ? ?我们建议读者像上面这样使用 value 属性读取或设置文本框的值，南昌网站建设公司网络前端开发工程师不建议使用标准的 DOM方法。 换句话说，不要使用 setAttribute()设置<input>元素的 value 特性，也不要去修改<textarea> 元素的第一个子节点。原因很简单：对 value 属性所作的修改，不一定会反映在 DOM中。因此，在处 理文本框的值时，好不要使用 DOM方法。?<br /> <strong>选择文本</strong><br /> ? ? ? ?上述两种文本框都支持 select()方法，这个方法用于选择文本框中的所有文本。在调用 select() 方法时，大多数浏览器（Opera 除外）都会将焦点设置到文本框中。这个方法不接受参数，可以在任何 时候被调用。下面来看一个例子。?<br /> ? ? ? ? var textbox = document.forms[0].elements["textbox1"];<br /> ? ? ? ?textbox.select();?<br /> ? ? ? ?在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时 候。因为这样做可以让用户不必一个一个地删除文本。下面展示了实现这一操作的代码。?<br /> ? ? ? ? EventUtil.addHandler(window, "load", function(event){<br /> ? ? ? ? ? ? ? var textbox = document.forms[0].elements[0];?<br /> ? ? ? ?EventUtil.addHandler(textbox, "focus", function(event){<br /> ? ? ? ? ? ? ? event = EventUtil.getEvent(event);<br /> ? ? ? ? ? ? ? var target = EventUtil.getTarget(event);<br /> ? ? ? ? ? ? ? ? ? ? ?target.select();<br /> ? ? ? ? ? ? ? });<br /> ? ? ? ? ? ? ? ? ? ? ? textbox.focus();<br /> ? ? ? ? ? ? ? });?<br /> <br /> ? ? ? ?将上面的代码应用到文本框之后，只要文本框获得焦点，就会选择其中所有的文本。这种技术能够 较大幅度地提升表单的易用性。?<br /> ? ? ? ?<strong>1. 选择（select）事件</strong><br /> ? ? ? ?与 select()方法对应的，是一个 select 事件。在选择了文本框中的文本时，就会触发 select 事件。不过，到底什么时候触发 select 事件，还会因浏览器而异。在 IE9+、Opera、Firefox、Chrome 和 Safari中，只有用户选择了文本（而且要释放鼠标），才会触发 select 事件。而在 IE8及更早版本中，?<br /> ? ? ? ?只要用户选择了一个字母（不必释放鼠标），就会触发 select 事件。另外，在调用 select()方法时也 会触发 select 事件。下面是一个简单的例子。?<br /> ? ? ? ?var textbox = document.forms[0].elements["textbox1"];<br /> ? ? ? ? EventUtil.addHandler(textbox, "select", function(event){<br /> ? ? ? ? var alert("Text selected" + textbox.value);?<br /> ? ? ? ?});?<br /> ? ? ? ?<strong>2. 取得选择的文本</strong><br /> ? ? ? ?虽然通过select事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。 HTML5 通过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。该规范采取的办法是添加 两个属性：selectionStart 和 selectionEnd。这两个属性中保存的是基于 0 的数值，表示所选择 文本的范围（即文本选区开头和结尾的偏移量）。因此，要取得用户在文本框中选择的文本，可以使用 如下代码。?<br /> ? ? ? ?function getSelectedText(textbox){?<br /> ? ? ? ? ? ? ? return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);<br /> ? ? ? ? ? ? ? }?<br /> ? ? ? ?因为 substring()方法基于字符串的偏移量执行操作，所以将 selectionStart 和 selectionEnd 直接传给它就可以取得选中的文本。<br /> ? ? ? ?IE9+、Firefox、Safari、Chrome 和 Opera 都支持这两个属性。IE8 及之前版本不支持这两个属性， 而是提供了另一种方案。<br /> ? ? ? ?IE8 及更早的版本中有一个 document.selection 对象，其中保存着用户在整个文档范围内选择 的文本信息；也就是说，无法确定用户选择的是页面中哪个部位的文本。不过，在与 select 事件一起 使用的时候，可以假定是用户选择了文本框中的文本，因而触发了该事件。要取得选择的文本，首先必 须创建一个范围，然后再将文本从其中提取出来，如下面的例子所示。?<br /> ? ? ? ? function getSelectedText(textbox){<br /> ? ? ? ? ? ? ? if (typeof textbox.selectionStart == "number"){<br /> ? ? ? ? ? ? ? ? ? ? ?return textbox.value.substring(textbox.selectionStart,?<br /> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?textbox.selectionEnd);?<br /> ? ? ? ? ? ? ? } else if (document.selection){<br /> ? ? ? ? ? ? ? ? ? ? ?return document.selection.createRange().text;<br /> ? ? ? ? ? ? ? }<br /> ? ? ? ?}<br /> ? ? ? ?这里修改了前面的函数，包括了在 IE中取得选择文本的代码。注意，调用 document.selection 时，不需要考虑 textbox 参数。<br /> ? ? ? ?<strong>3. 选择部分文本</strong><br /> ? ? ? ? HTML5 也为选择文本框中的部分文本提供了解决方案，即早由 Firefox 引入的 setSelectionRange()方法。现在除select()方法之外，所有文本框都有一个setSelectionRange() 方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的后一个字符之后的字符的索引 （类似于 substring()方法的两个参数）。来看一个例子。<br /> ? ? ? ?textbox.value = "Hello world!"?<br /> ? ? ? ?//选择所有文本<br /> ? ? ? ?textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"<br /> ? ? ? ?//选择前 3 个字符?<br /> ? ? ? ?textbox.setSelectionRange(0, 3); //"Hel"<br /> ? ? ? ?//选择第 4 到第 6 个字符?<br /> ? ? ? ?textbox.setSelectionRange(4, 7); //"o w"?<br /> ? ? ? ?要看到选择的文本，必须在调用 setSelectionRange()之前或之后立即将焦点设置到文本框。 IE9、Firefox、Safari、Chrome和 Opera支持这种方案。?<br /> ? ? ? ?IE8及更早版本支持使用范围（第 12章讨论过）选择部分文本。要选择文本框中的部分文本，必须 首先使用 IE 在所有文本框上提供的 createTextRange()方法创建一个范围，并将其放在恰当的位置 上。然后，再使用 moveStart()和 moveEnd()这两个范围方法将范围移动到位。不过，在调用这两个 方法以前，还必须使用 collapse()将范围折叠到文本框的开始位置。此时，moveStart()将范围的起 点和终点移动到了相同的位置，只要再给 moveEnd()传入要选择的字符总数即可。后一步，就是使 用范围的 select()方法选择文本，如下面的例子所示。?<br /> ? ? ? ?textbox.value = "Hello world!";?<br /> ? ? ? ?var range = textbox.createTextRange();?<br /> //选择所有文本<br /> ? ? ? ? range.collapse(true);?<br /> ? ? ? ?range.moveStart("character", 0);?<br /> ? ? ? ?range.moveEnd("character", textbox.value.length); //"Hello world!"?<br /> ? ? ? ?range.select();?<br /> <br /> //选择前 3 个字符?<br /> ? ? ? ?range.collapse(true);<br /> ? ? ? ? range.moveStart("character", 0);<br /> ? ? ? ? range.moveEnd("character", 3);<br /> ? ? ? ? range.select(); //"Hel"?<br /> <br /> //选择第 4 到第 6 个字符<br /> ? ? ? ?range.collapse(true);?<br /> ? ? ? ?range.moveStart("character", 4);<br /> ? ? ? ? range.moveEnd("character", 3);?<br /> ? ? ? ?range.select(); //"o w"?<br /> ? ? ? ?与在其他浏览器中一样，要想在文本框中看到文本被选择的效果，必须让文本框获得焦点。 为了实现跨浏览器编程，可以将上述两种方案组合起来，如下面的例子所示。?<br /> <br /> function selectText(textbox, startIndex, stopIndex){<br /> ? ? ? ? if (textbox.setSelectionRange){?<br /> ? ? ? ? ? ? ? textbox.setSelectionRange(startIndex, stopIndex);<br /> ? ? ? ? } else if (textbox.createTextRange){<br /> ? ? ? ? ? ? ? var range = textbox.createTextRange();?<br /> ? ? ? ? ? ? ?range.collapse(true);<br /> ? ? ? ? ? ? ?range.moveStart("character", startIndex);?<br /> ? ? ? ? ? ? ?range.moveEnd("character", stopIndex - startIndex);<br /> ? ? ? ? ? ? ?range.select(); }<br /> ? ? ? ? ? ? ?textbox.focus();?<br /> ? ? ? ?}?<br /> ? ? ? ?这个 selectText()函数接收三个参数：要操作的文本框、要选择文本中第一个字符的索引和要选 择文本中后一个字符之后的索引。首先，函数测试了文本框是否包含 setSelectionRange()方法。 如果有，则使用该方法。否则，检测文本框是否支持 createTextRange()方法。如果支持，则通过创 建范围来实现选择。后一步，就是为文本框设置焦点，以便用户看到文本框中选择的文本。可以像下 面这样使用 selectText()方法。?<br /> ? ? ? ?textbox.value = "Hello world!"<br /> ? ? ? ?//选择所有文本?<br /> ? ? ? ?selectText(textbox, 0, textbox.value.length); //"Hello world!"<br /> ? ? ? ?//选择前 3 个字符?<br /> ? ? ? ?selectText(textbox, 0, 3); //"Hel"<br /> ? ? ? ?//选择第 4 到第 6 个字符 selectText(textbox, 4, 7); //"o w"?<br /> ? ? ? ?选择部分文本的技术在实现高级文本输入框时很有用，例如提供自动完成建议的文本框就可以使用 这种技术。?<br /> ? ?本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌APP开发公司-网络 <a href="http://www.huicuiwang.cn/" target="_blank">http://www.huicuiwang.cn/</a> 如转载请注明出处! </p> </div> <p>PS：所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！</p> <div class="page_back"> <div> 上一篇：<a href='/xingyezixun/2022011117413.html'>深圳软件开发10年多少薪资[怎么样]</a> </div> <div> 下一篇：<a href='/xingyezixun/2022011117415.html'>搬家APP开发让你搬家省时又省力</a> </div> <span class="bapage_back_up"><a href="/xingyezixun/">返回列表页</a></span> </div> <!-------翻页 END---------> </div> </div> <!------------main END------------> <div id="foot_bg"> <div id="foot" class="warp"> <div class="copy"> <p>Copyright © 20019-2023 荟萃信息网 版权所有 <a href="http://www.beian.miit.gov.cn">蜀ICP备16021156号-2</a> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?92d475e604c0b54a22f1d6b404ad6885"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>(function() {var _53code = document.createElement("script");_53code.src = "https://tb.53kf.com/code/code/84b2462dfe3afd083ae49ea91593c7fe5/1";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(_53code, s);})();</script></p> <p>电 话：0    手 机：0    传 真：    E-mail：2074917417@qq.com</p> <p>地 址：成都市金牛区 </p> <p>技术支持：<a href="/" target="_blank">荟萃网络科技</a>   </p> </div> <div class="foot_erweima"><img src="/skin/img/weixin.jpg"/> <p>扫码关注我们</p> </div> </div> </div> <div id="foot_nav_bg"> <div class="warp foot_nav"><a href="/">网站首页</a> | <a href="/app/">app开发</a>| <a href="/Development/">小程序开发</a>| <a href="/sem/">SEM竞价托管</a>| <a href="/xingyezixun/">行业资讯</a> </div> </div> <!-------------------------> <div class="toolbar"> <a href="javascript:;" class="toolbar-item toolbar-item-weixin"><span class="toolbar-layer"> <p>扫码关注我们</p> <img src="/skin/img/weixin.jpg"/></span></a> <a href="http://wpa.qq.com/msgrd?v=3&site=&menu=yes&uin=2074917417" target="_blank" class="toolbar-item toolbar-item-kefu"></a> <a href="javascript:scroll(0,0)" id="top" class="toolbar-item toolbar-item-top"></a> </div> <?php include_once("baidu_js_push.php") ?> </body> </html>