將游標始終定位與文字框的左側

螞蟻小編發表於2017-03-25
原文網址 : https://www.softwhy.com/article-4534-1.html

在實際應用中，可能很少有這樣的需求，那就是將游標位置始終定位於文字框的左側。

雖然這種要求比較少見，但也並非沒有，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul{list-style:none;}
.elem{width:200px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function setPosition(ctrl,pos){
  if(ctrl.setSelectionRange){
    ctrl.focus();
    ctrl.setSelectionRange(pos,pos);
  }
  else if(ctrl.createTextRange){
    var range=ctrl.createTextRange();
    range.collapse(true);
    range.moveEnd('character',pos);
    range.moveStart('character',pos);
    range.select();
  }
}
$(document).ready(function(){
  $('.elem').on('keypress keyup',function(){
    if(event.keyCode===8){
      return;
    } 
    setPosition(this,0);
  });
})
</script>
</head>
<body>
<div>
  <ul>
    <li><input type="text" class="elem"></li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，在文字框輸入內容的時候，能夠始終將游標定位於文字框的左側。

程式碼註釋:

1.function setPosition(ctrl,pos){}，此函式實現了定位功能，第一個引數是文字框物件，第二個引數是定位的位置。2.if(ctrl.setSelectionRange)，判斷是否支援setSelectionRange()函式，其實這裡判斷是否是標準瀏覽器。

3.ctrl.focus()，讓文字框獲取焦點，完全可以不要此程式碼。

4.ctrl.setSelectionRange(pos,pos)，setSelectionRange()函式可以設定當文字框內容選中的開始和結束位置，兩個引數分別用來規定開始位置和結束位置。

5.else if(ctrl.createTextRange)，用來相容低版本IE瀏覽器，其實一直到IE10都是支援的，IE11不支援。

6.var range=ctrl.createTextRange()，用來建立一個Range物件。

7.range.collapse(true)，將Range物件的內容清空。

8.range.moveEnd('character',pos)，設定文字框中選區的內容的開始位置。

9.range.moveStart('character',pos)，設定文字框中選區的內容的結束位置。

10.range.select()，將選區中的內容呈現高亮顯示。

相關文章