码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-09-05 16:03:11      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   使用   java   ar   

在文本框倒叙输入一文中提到了设置文本框焦点的javascript代码,今天就使用这段代码来做一个Demo。内容就是当删除单词时就一次性删除整个单词,如图所示:

bubuko.com,布布扣

 下面我把示例代码贴上:

 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 Support
19             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 support
26             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>

 

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

标签:style   blog   http   color   os   io   使用   java   ar   

原文地址:http://www.cnblogs.com/xiyangbaixue/p/3958116.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!