More than 3 years have passed since last update.

input要素のフォーカスを固定(維持)

note

Last updated at 2021-10-24Posted at 2021-10-24

ソフトウェアキーボード（jquery）のメモ。
キーをクリックした際に input のフォーカスが外れてしまうため、フォーカスを維持するには、再フォーカスの処理が必要なのですが、firefox は blur() 内での focus() が機能しないバグがあるようです。
firefox対応には一工夫が必要。

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> -->
<script src="https://code.jquery.com/jquery-1.6.min.js" integrity="sha256-5Y2lizFMze76PEhltLiqMVPokNeQTgRINIHY//LCfqo=" crossorigin="anonymous"></script>
<!-- <script src="https://code.jquery.com/jquery-1.5.1.min.js" integrity="sha256-dkuenzrThqqlzerpNoNTmU3mHAvt4IfI9+NXnLRD3js=" crossorigin="anonymous"></script> -->
<title>Document</title>
<style>
# field input:focus {
  background: rgba(255,0,0,0.2);
}
# field input.is-focus {
  outline: 2px solid #00f;
}
# keyboard:active input {
  color: transparent;
}

# keyboard:not(.is-open) {
  display: none;
}

</style>
<script>
$(function(){

var inputList = {
  user: { next: 'pass', text: 'passへ移動'},
  pass: { next: 'tel' , text: 'telへ移動'},
  tel:  { next: 'user', text: 'userへ移動'}
}
var className = {
  isOpen: 'is-open',
  isFocus: 'is-focus'
}
var $fieldGroup = $('#field');
var $btnNext = $('#next');
var currentId = 'user';

// inputList からセレクタ生成
// jquery 1.x 対応
var inputElems;
$.each(inputList, function(key){
  if(inputElems === 'undefined') {
    inputElems = '#' + key;
  } else {
    inputElems = inputElems + ', #' + key;
  }
});
var $inputElems = $(inputElems);
// jquery 1.6以降は map()でセレクタ生成可
// var $inputElems = $($.map(inputList, function (value, key) { return '#' + key; }).join());

// 入力待機 input のフォーカスを維持
$inputElems.blur(function(){
  if(currentId === this.id) {
    this.focus();

    // （Firefox Bug）https://bugzilla.mozilla.org/show_bug.cgi?id=53579
    // focusされていなければ別スレッドで再度フォーカス実行する
    if (document.activeElement !== this) {
      input = this;
      setTimeout(function () { input.focus(), 1});
    }
  }
});


$inputElems.click(function(){
  changeFocusInput(this.id);
});

$btnNext.click(function(){
  changeFocusInput(inputList[currentId].next);
});


// 入力対象を変更
function changeFocusInput(id) {
  $fieldGroup.find('.' + className.isFocus).removeClass(className.isFocus);
  currentId = id;
  $('#' + id).focus().addClass(className.isFocus);
  $btnNext.text(inputList[id].text);
}


var $keyboard = $('#keyboard');
var $keys = $('#keys');
var $key = $keys.find('input');
var $clear = $('#clear');

$key.click(function(){
  var value = this.value;
  var $target = $('#' + currentId);
  var targetVal = $target.val();
  var maxlength = Number($target.attr('maxlength'));

  if (targetVal.length < maxlength || maxlength === 0 || !maxlength) {
    $target.val(targetVal + value);
  }
});

$clear.click(function(){
  var $target = $('#' + currentId);
  $target.val('');
});


var $open = $('#open');
$open.click(function(){
  $keyboard.addClass(className.isOpen);
  changeFocusInput(currentId);
});

var $close = $('#close');
$close.click(function(){
  $inputElems.unbind();
  $fieldGroup.find('.' + className.isFocus).removeClass(className.isFocus);
  $keyboard.removeClass(className.isOpen);
});


});
</script>
</head>
<body>

<div id="field">
  <input id="user" type="text" value="" placeholder="user">
  <br>
  <input id="pass" type="password" value="" maxlength="40" placeholder="password">
  <br>
  <input id="tel" type="tel" value="" maxlength="11" placeholder="tel">
</div>
<p><a href="#" id="open">ソフトウェアキーボード</a></p>

<div id="keyboard" class="keyboard">
  <div id="keys">
    <input type="button" value="0">
    <input type="button" value="1">
    <input type="button" value="2">
    <input type="button" value="3">
    <input type="button" value="4">
    <input type="button" value="5">
    <input type="button" value="6">
    <input type="button" value="7">
    <input type="button" value="8">
    <input type="button" value="9">
  </div>
  <div>
    <button id="clear" type="button">Clear</button>
    <button id="next" type="button">Next</button>
    <button id="close" type="button">Close</button>
  </div>
</div>

</body>
</html>

以上、ありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up