フォーカスの移動

複数のinput要素への入力を連続して行う場合、Tabキーでフォーカスを移動することになりますが、elements.focus()を使ってこれを自動的に行う事が出来ます。

ただし、input要素のvalue値を入力(Enterキーを押す)した後のタイミングでフォーカスを動かそうとすると、input要素のindexを使ってキー入力されたinput要素のindex値よりも大きい(:gt(index))、最初の要素(:first)に対しfocusするとコーディングします。

<!DOCTYPE html>
<html lang="UTF-8">
<head>
	<meta charset="UTF-8">
	<title>YMFB_placeholder</title>
	<style>
		#wrapper{width: 380px;}
		textarea{width: 370px;}
		dt{background: lightblue; padding:4px; margin-top:8px;}
		dd{margin:2px;}
	</style>
	<script type="text/javascript" src="C:\0 JavaScript\jQuery\jquery-3.1.0.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		// 住所入力　html5
		function onButtonClick() {
			var jyusho = document.getElementById("output");
			jyusho.innerHTML = document.getElementById("add1").value + document.getElementById("add2").value;
		}
		function onButtonClickJQ() {
			var jyushoJQ = document.getElementById("outputJQ");
			jyushoJQ.innerHTML = document.getElementById("add1JQ").value + document.getElementById("add2JQ").value;
		}

	$(function(){
//  var elements = "input[type=text]";
  var elements = "input";
  $(elements).keypress(function(e) {
    var c = e.which;
    if (c == 13) { 
      var index = $(elements).index(this);
      if( (index == 2) || (index == 5) ) { onButtonClick(); }
      else {
      	$(elements + ":gt(" + index + "):first").focus();
      	e.preventDefault();
      }
    } 
  });
});

	</script>
    <script type="text/javascript" src="C:\0 JavaScript\jQuery\jquery.ah-placeholder.js" charset="utf-8">
    $(function()
    {
        $('.jq-placeholder').ahPlaceholder({
            placeholderColor : 'silver',
            placeholderAttr  : 'title',
            likeApple        : false
        });
    });

    
    </script>
</head>
<body>
	<div id="wrapper">
		<h1>住所入力</h1>
		<dl>
			<dt>HTML5なら</dt>
			<dd><input type="text" id="add1" placeholder="都道府県を入力してください。"></dd>
			<dd><input type="text" id="add2" placeholder="番地を入力してください。"></dd>
			<dd><input type="button" id="btn_done" value="確定" onclick="onButtonClick();"></dd>
			<dd><div id="output"></div></dd>
		</dl>
		<dl>
			<dt>jqueryなら</dt>
			<input type="text" id="add1JQ" value="" placeholder="都道府県を入力してください。"><br>
			<input type="text" id="add2JQ" value="" placeholder="番地を入力してください。">
			<dd><input type="button" id="btn_placeholderJQ" value="確定" onclick="onButtonClickJQ();"></dd>
			<dd><div id="outputJQ"></div></dd>
		</dl>

	</div>

</body>
</html>

※なお、e.preventDefault();は、その要素のイベントをキャンセルしている。

フォーカスの移動

カテゴリー