表单中文本框选择文本、选择部分文本及select事件详细介绍

我前通过《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.jxbh.cn/" target="_blank">http://www.jxbh.cn/</a> 如转载请注明出处! </p> </div> </div> <div class="article-pager" style="margin-top:10px;"> <ul> <li class="article-top"><a href="https://m.jxbh.cn/article/1875.html"><span class="icon icon-menu-left"></span> 上一篇</a></li> <li class="article-back"><a href="https://m.jxbh.cn/knowledge/index.html"><span class="icon icon-list"></span> 返回列表</a></li> <li class="article-next"><a href="https://m.jxbh.cn/article/1873.html">下一篇 <span class="icon icon-menu-right"></span></a></li> </ul> </div> <div class="bh-share"><span>展开分享</span></div> <div class="article-share animated"> <a href="http://widget.renren.com/dialog/share?resourceUrl=https://m.jxbh.cn/article/1874.html&utm_medium=renren&title=表单中文本框选择文本、选择部分文本及select事件详细介绍&pic=https://www.jxbh.cn/uploads/images//default/default.png&srcUrl=https://m.jxbh.cn/article/1874.html" target="_blank" title="分享到人人网"> <div class="share-icon s-rr"><img src="/public/home/images/icon/renren.png" title="分享到人人网" alt="分享到人人网"></div> </a> <a href="https://www.douban.com/share/service?name=表单中文本框选择文本、选择部分文本及select事件详细介绍&href=https://m.jxbh.cn/article/1874.html?utm_source=js-share&utm_medium=douban&image=https://www.jxbh.cn/uploads/images//default/default.png&updated=&bm=&url=https://m.jxbh.cn/article/1874.html?utm_source=js-share&utm_medium=douban&title=表单中文本框选择文本、选择部分文本及select事件详细介绍&image=https://www.jxbh.cn/uploads/images//default/default.png&comment=表单中文本框选择文本、选择部分文本及select事件详细介绍" target="_blank" title="分享到豆瓣网"> <div class="share-icon s-dou"><img src="/public/home/images/icon/dou.png" title="分享到豆瓣网" alt="分享到豆瓣网"></div> </a> <a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://m.jxbh.cn/article/1874.html&title=&desc=表单中文本框选择文本、选择部分文本及select事件详细介绍&summary=表单中文本框选择文本、选择部分文本及select事件详细介绍https://m.jxbh.cn/article/1874.html&site=UiiiUiii&pics=https://www.jxbh.cn/uploads/images//default/default.png" target="_blank" title="分享到QQ空间"> <div class="share-icon s-qq"><img src="/public/home/images/icon/qqzone.png" title="分享到QQ空间" alt="分享到QQ空间"></div> </a> <a href="javascript:void(0)" title="分享到腾讯微博"> <div class="share-icon s-tx"><img src="/public/home/images/icon/qqweibo.png" title="分享到腾讯微博" alt="分享到腾讯微博"></div> </a> <a href="http://service.weibo.com/share/share.php?appkey=&uurl=https://m.jxbh.cn/article/1874.html&title=表单中文本框选择文本、选择部分文本及select事件详细介绍@南昌百恒网络原文学习戳→&content=utf-8&pic=https://www.jxbh.cn/uploads/images//default/default.png" target="_blank" title="分享到新浪微博"> <div class="share-icon s-wb"><img src="/public/home/images/icon/weibo.png" title="分享到新浪微博" alt="分享到新浪微博"></div> </a> <a href="http://connect.qq.com/widget/shareqq/index.html?url=https://m.jxbh.cn/article/1874.html&title=表单中文本框选择文本、选择部分文本及select事件详细介绍https://m.jxbh.cn/article/1874.html&summary=表单中文本框选择文本、选择部分文本及select事件详细介绍&site=baidu&pics=https://www.jxbh.cn/uploads/images//default/default.pngic}" target="_blank" title="分享到微信"> <div class="share-icon s-wx"><img src="/public/home/images/icon/qq.png" title="分享到QQ好友" alt="分享到QQ好友"></div> </a> </div> <script type="text/javascript" src="/public/home/js/previewImage.min.js"></script> <script type="text/javascript"> $(".bh-share").click(function(e) { var $this = $(this); if ($(".article-share").is(":hidden")) { $this.find("span").text('关闭分享'); $(".article-share").show().animate({"bottom":"65px"},400,function(e){ $(".article-share").addClass("bounce"); }); } else { $this.find("span").text('展开分享'); $(".article-share").animate({"bottom":"-65px"},400,function(e){ $(".article-share").hide(); }); } }); $(".article-content img").addClass("img-thumbnail"); $(document).ready(function(e) { $('.article-content img').click(function(e) { var urls = []; $('.article-content img').each(function(index, element) { urls[index] = $('.article-content img').eq(index).attr('src'); }); var img = $(this).attr('src'); var imglist = {urls:urls,current:img}; previewImage.start(imglist); }); $(".article-content a").click(function(e) { window.location.href = $(this).attr("href"); }); }); </script> <div class="bh-fmenu"> <a href="/home/index/service.html"><div class="bh-fdiv"> <div class="bh-fimg"><img src="/public/home/images/mobile/website.png" width="20"></div> <div class="bh-ffont">服务</div> </div></a> <a href="https://m.jxbh.cn/case/index.html"><div class="bh-fdiv"> <div class="bh-fimg"><img src="/public/home/images/mobile/case.png" width="18"></div> <div class="bh-ffont">案例</div> </div></a> <a href="https://m.jxbh.cn/index.html"><div class="bh-fmore"> <div class="bh-mymore"></div> <div class="bh-myfont"></div> </div></a> <a href="https://m.jxbh.cn/info/index.html"><div class="bh-fdiv"> <div class="bh-fimg"><img src="/public/home/images/mobile/new.png" width="20"></div> <div class="bh-ffont">动态</div> </div></a> <a href="https://m.jxbh.cn/contact/index.html"><div class="bh-fdiv"> <div class="bh-fimg"><img src="/public/home/images/mobile/contact.png" width="16"></div> <div class="bh-ffont">联系</div> </div></a> </div>  <a href='tel:4006809298'><div class="tel-icon"><span class="icon icon-comment"></span><div class="tel-num">咨询</div></div></a> <script type="text/javascript"> $(".bh-fmenu").animate({"bottom":"0"},500,function(){}); $.post('https://m.jxbh.cn/online/index.html', {'online':1},function(data){},'json'); $(".bh-fixtop").click(function(e) { $("html,body,php").animate({scrollTop: 0}, 400); }); console.log('Welcome to http://www.jxbh.cn'); </script> </body> </html>