javascript實現的文字框焦點位置放置於尾部

antzone發表於2017-03-21
JavaScript

在表單文字框內容規範驗證的時候，如果不符合規範那麼就讓文字框獲取焦點，如果文字框預設是有文字的話，在不同的瀏覽器中後去焦點的方式會有所不同，在谷歌中，會將文字框中的內容選中，但是在火狐和IE瀏覽器中，焦點會位於文字框的最左邊，這不夠人性化，如果讓游標位置位於文字框文字的結尾那就更為人性化一些，下面就通過程式碼實力介紹一下如何實現次效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
function getSelectPos(username){
  var username = document.getElementById(username);
  if(username.createTextRange){
    var rtextRange =username.createTextRange();
    rtextRange.moveStart('character',username.value.length);
    rtextRange.collapse(true);
    rtextRange.select();
  }
}
window.onload=function(){
  getSelectPos("username")
}
</script> 
</head> 
<body> 
<form>
<input type="text" name="username" value="螞蟻部落" id="username"/>
</form>
</body> 
</html>

以上程式碼只是一個簡單的演示，真的遇到表單驗證的時候可以做一下改造即可。

相關文章