14.2.1选择文本取得选择的文本选择部分文本
Posted jokes
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了14.2.1选择文本取得选择的文本选择部分文本相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Document</title> </head> <body> <p id=‘p‘>test<p> <form> <input type=‘submit‘ value=‘Submit Form‘ > </form> <form> <button type=‘submit‘ name="submit-btn" autofocus>Submit Form</button> </form> <form name=‘form2‘> <input type=‘image‘ src=‘2.jpg‘ width=‘15%‘height=‘15%‘> </form> <form> <input type=‘reset‘ value=‘Rest From‘> <button type=‘reset‘>Rest From</button> </form> <form> <select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> </form> <form> <!-- 行间添加javascript代码，解决IE下mouseout不能取消焦点问题 标准下获得焦点可以select()取消焦点blur() 非标准下获得焦点select()取消焦点 this.value = this.value --> <input id="txtId" type="text" value="over out" onmouseover="javascript:this.select();" onmouseout="javascript:this.blur()||(this.value=this.value);"/> </form> <form> <textarea rows=‘15‘ cols=‘15‘ style=‘resize:none‘>121545sd2154521212312313213</textarea> </form> <script type="text/javascript"> var EventUtil = { addHandler: function(element,type,handler){//添加事件 if (element.addEventListener) { element.addEventListener(type,handler,false); }else if (element.attachEvent) { element.attachEvent(‘on‘+type,function(){ //做的IE兼容 handler.call(element); }); }else { element[‘on‘+type] = handler; } }, getEvent: function(event){//获得事件对象 return event || window.event; }, getTarget: function(event){//获得事件元素 return event.target || event.srcElement; }, preventDefault: function(){//取消默认事件行为 if (event.preventDefault) { event.preventDefault(); }else { event.returnValue = false; } }, removeHandler: function(element,type,handler){//取消事件 if (element.removeEventListener) { element.removeEventListener(type,handler,false) }else if (element.dettchEvent) { element.dettchEvent(‘on‘+type,handler); }else { element[‘on‘+type] = null; } }, stopPropagation: function(event){//取消冒泡机制 if (event.stopPropagation) { event.stopPropagation(); }else { event.cancleBubble = true; } }, getRelatedTarget: function(event){ if (event.relatedTarget) { return event.relatedTarget;//标准下返回相关元素 }else if (event.toElement) { return event.toElement;//mouseout事件触发，保存相关元素 }else if (event.fromElement) { return event.fromElement;//mouseover事件触发，保存相关元素 } }, getButton: function(event){//鼠标按钮兼容 if (document.implementation.hasFeature(‘MouseEvents‘,‘2.0‘))//标准下 { return event.button; }else { switch (event.button)//非标准下 { case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }, getWheelDelta: function(event){//滚轮事件兼容 //所以要兼容，写两个函数函数 //client的兼容性必须先写出来 if (event.wheelDelta) { /* 兼容opear9.5以前版本的正负相反，mousewheel */ return (window.client.engine.opera && window.client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); }else { /* 兼容firefox正负和3的倍数的问题，DOMMouseScroll */ return -event.detail*40; } }, getCharCode: function(event){//键盘事件兼容 if (typeof event.charCode == ‘number‘)//首先检测按键有没有代表的字符，如果没有就没有charCode，为undefined { return event.charCode; }else { return event.keyCode } } }; var af = document.forms; /* function sub(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); //target.elements获得是一个集合可以用下表取得也可以用名字获得 var btn = target.elements[‘submit-btn‘]; document.body.innerHTML += btn ; //禁用提交 btn.disable = true; } EventUtil.addHandler(af[1],‘submit‘,sub) //刷新网页设置聚焦的元素 //如果input元素type属性为hidden或css的display和visibility属性隐藏了该字段，同样也会导致错误 EventUtil.addHandler(window,‘load‘,function(event){ document.forms[1].elements[‘submit-btn‘].focus(); }); //元素可以添加autofocus来自动聚焦，如果添加了ele.autofocus === true //检测是否设置了autofocus,autofocus是布尔值 EventUtil.addHandler(window,‘load‘,function(event){ var element = document.forms[1].elements[‘submit-btn‘]; if (element.autofocus !== true) { element.focus(); console.log( ‘JS focus‘ ); } }); //获得焦点，然后文本框变色，或者触发change事件，检测输入的内容是否合法 var textBox = document.forms[document.forms.length-1].elements[0]; console.log( textBox ); EventUtil.addHandler(textBox,‘focus‘,change1); EventUtil.addHandler(textBox,‘blur‘,change2); EventUtil.addHandler(textBox,‘change‘,change3); function change1(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (target.style.background === ‘‘) { target.style.background = ‘yellow‘; } } function change2(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (/[^d]/.test(target.value)) { target.style.background = ‘red‘; }else { target.style.background = ‘‘; } } function change3(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); console.log(1) if (/[^d]/.test(target.value)) { target.style.background = ‘red‘; }else { target.style.background = ‘‘; } } */ /* //非标准下聚焦的触发事件 var textBox = af[af.length-1].elements[0]; EventUtil.addHandler(textBox,‘focus‘,change); function change(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); target.select(); } */ //这里不能使用select触发，虽然标准下可以正常，但是IE兼容的不行他会在刚一触发就执行 //所以只能用mouseup触发 var textBox = af[af.length-1].elements[0]; EventUtil.addHandler(textBox,‘mouseup‘,fn); function fn(event){ var that = this; //ie兼容 var a = compa(that); alert(a); } //兼容函数 function compa(that){ if (typeof that.selectionStart === ‘number‘) { return that.value.substring(that.selectionStart,that.selectionEnd); }else { //document.selection.createRange()为一个对象 return document.selection.createRange().text; } } alert(blur in window) </script> </body> </html>
以上是关于14.2.1选择文本取得选择的文本选择部分文本的主要内容，如果未能解决你的问题，请参考以下文章