點選enter回車能夠切換表單元素焦點程式碼例項

admin發表於2017-03-31

一個比方便的操作就是點選Enter鍵能夠實現切換表單元素焦點的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('input:text:first').focus(); 
  document.onkeydown = function enterHandler(event){
    var inputs = $("input"); //可自行新增其它過濾條件 
    var browser = navigator.appName ; //瀏覽器名稱
    var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串 
  
    var Code = '' ;
        // IE 
    if(browser.indexOf('Internet')>-1){
          Code = window.event.keyCode ;
        } 
        // 火狐
    else if(userAgent.indexOf("Firefox")>-1){
          Code = event.which;
        } 
        // 其它
    else {
          Code = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
        }
    //可以自行加其它過濾條件
    if(Code == 13){
      for(var i=0;i<inputs.length;i++){
        if(inputs[i].id == document.activeElement.id){ 
          i = i== (inputs.length - 1) ? -1 : i ;
          $('#'+ inputs[i+1].id ).focus()
          break;
        }
      }
    }
  }
})
</script>
</head>
<body>
<ul>
  <li><input id="one" type="text" value="螞蟻部落"/></li>
  <li><input id="two" type="text" value="softwhy.com"/></li>
</ul>
</body>
</html>

上面的程式碼實現了我們的要求，點選回車可以實現切換文字框的焦點效果。

相關文章