在文本框倒叙输入一文中提到了设置文本框焦点的javascript代码,今天就使用这段代码来做一个Demo。内容就是当删除单词时就一次性删除整个单词,如图所示:
下面我把示例代码贴上:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 6 <style> 7 .content {width: 300px;margin: 0 auto;} 8 </style> 9 <script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>10 </head>11 <body>12 <div class="content">13 <textarea name="" id="demo" cols="30" rows="10"></textarea>14 </div>15 <script>16 var getCursortPosition = function(ctrl) {17 var CaretPos = 0;18 // IE Support19 if (document.selection) {20 ctrl.focus();21 var Sel = document.selection.createRange();22 Sel.moveStart ('character', -ctrl.value.length);23 CaretPos = Sel.text.length;24 }25 // Firefox support26 else if (ctrl.selectionStart || +ctrl.selectionStart === 0)27 {CaretPos = ctrl.selectionStart;}28 return (CaretPos);29 };30 31 var selectSomeText = function(element,begin,end)32 {33 if (element.setSelectionRange)34 {35 element.setSelectionRange(begin,end);36 }37 else if (element.createTextRange)38 {39 var range = element.createTextRange();40 range.moveStart("character",begin);41 range.moveEnd("character",end);42 range.select();43 }44 };45 46 var delWholeWord = function(text, field, pos){47 var startIndex = pos;48 if (field.charAt(pos-1) !== ' '){49 for (var i=pos-2;i>=0;i--){50 if (field.charAt(i) === ' ' || i === 0){51 startIndex = i;52 break;53 }54 }55 selectSomeText(text, startIndex, pos)56 }57 58 };59 $('#demo').keydown(function(event) {60 if(event.keyCode !== 8) {61 return;62 }63 var bodyText = $(this)[0];64 var bodyField = $(this).val();65 var pos = getCursortPosition(bodyText);66 delWholeWord(bodyText, bodyField, pos);67 });68 </script>69 </body>70 </html>
新闻热点
疑难解答