首页 > 网站 > WEB开发 > 正文

按一下删除键删除整个单词

2024-04-27 14:19:25
字体:
来源:转载
供稿:网友

按一下删除键删除整个单词

在文本框倒叙输入一文中提到了设置文本框焦点的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>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表