jQuery-tabindex & Enter event

skip focus & change enter event

by I Sang Hyeon

HTML

<form>
<div>
  <ul>
    <li><input type="text" value="1st:normal"></li>
    <li><input type="text" value="2nd:hide" style="display:none;"></li>
    <li><input type="text" value="3rd:normal"></li>
    <li><input type="text" value="4th:readonly" readonly="readonly"></li>
    <li><input type="text" value="5th:normal"></li>
    <li><input type="text" value="6th:readonly" readonly></li>
    <li><input type="text" value="7th:normal"></li>
    <li><input type="text" value="8th:readonly" readonly="readonly"></li>
    <li><button>1st-button</button></li>
  </ul>
</div>
</form>

CSS

input:read-only {
	padding:1px;
	border:1px;
	border-style:solid;
	/* border-color:#7f9db9; */
	border-color:#cccccc;
	background-color: #ebebe4;
}

JavaScript

$(document).ready(function(){
  $('input[readonly]').each(function(){
    $(this).attr('tabindex', '-1');
  });
  
  $('input,button,select').on('keydown', function(e){
		var keyCode;
    
		if(window.event){
			keyCode = e.which;
		} else {
			keyCode = e.keyCode;
		}
    
		/* enter key event */
		if(keyCode === 13){
			e.preventDefault();
			var inputs = $(this).parents("form").eq(0).find("button,select,:input:visible:not([readonly])");
            var idx = inputs.index(this);
            
            if (idx == inputs.length - 1) {
                idx = 0;
            } else {
            	idx++;
            }
            inputs[idx].focus();
            
            return false;
        }
	});
  
});