zoukankan      html  css  js  c++  java
  • 按一下删除键删除整个单词

    在文本框倒叙输入一文中提到了设置文本框焦点的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 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>
  • 相关阅读:
    HTTP协议
    php目录操作
    PHP有关类的相关知识
    PHP设计模式
    PHP类的继承
    PHP重写
    php类中成员
    php面向对象
    什么是SVN
    ThinkPHP5 初识路由
  • 原文地址:https://www.cnblogs.com/xiyangbaixue/p/3958116.html
Copyright © 2011-2022 走看看