點選退格鍵刪除整個單詞而不是逐個字元刪除

antzone發表於2017-03-26
字元

本章節介紹一下在點選退格鍵刪除內容的時候能夠刪除整個單詞而不是按照字元為單位進行刪除。

這樣的需求獲取在某些應用下非常的方便。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.content{
  width:300px;
  margin:0 auto;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
var getCursortPosition=function(ctrl){
  var CaretPos = 0;
  // IE Support
  if(document.selection){
    ctrl.focus();
    var Sel=document.selection.createRange();
    Sel.moveStart('character',-ctrl.value.length);
    CaretPos=Sel.text.length;
  }
  //Firefox support
  else if(ctrl.selectionStart||+ctrl.selectionStart===0){
    CaretPos = ctrl.selectionStart;
  }
  return (CaretPos);
};
  
var selectSomeText=function(element,begin,end){
  if(element.setSelectionRange){
    element.setSelectionRange(begin,end);
  }
  else if(element.createTextRange){
    var range = element.createTextRange();
    range.moveStart("character",begin);
    range.moveEnd("character",end);
    range.select();
  }
};
  
var delWholeWord=function(text,field,pos){
  var startIndex = pos;
  if(field.charAt(pos-1)!==' '){
    for(var i=pos-2;i>=0;i--){
      if(field.charAt(i)===' '||i===0){
        startIndex=i;
        break;
      }
    }
    selectSomeText(text, startIndex, pos)
  }
};
$('#antzone').keydown(function(event){
  if(event.keyCode!==8){
    return;
  }
  var bodyText=$(this)[0];
  var bodyField=$(this).val();
  var pos=getCursortPosition(bodyText);
  delWholeWord(bodyText,bodyField,pos);
});
</script>
</head>
<body>
<div class="content">
  <textarea id="antzone" cols="30" rows="5"></textarea>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，文字域寫入內容，然後點選退格鍵就可以測試效果。

相關文章