入力フォームにフォーカスを当てる

Question

初心者です。用語等あまりわからず、かなりわかりづらいと思いますが、読んでいただければ幸いです。
絵文字を使ったパスワードを2つ、DBに登録するwebシステムを作っています。
2つの入力フォームに、ボタンを押して絵文字を登録していくという方法です。
下記のようにした場合、a2の入力フォームにしか絵文字が入らず悩んでいます。
アドバイスいただきたいです。

絵文字のボタンを押した段階で、ボタンにフォーカスが当たってしまうからだと考えますが、解決策がわかりません。
また、ソースコードを省いているところがあるので、場合によっては載せようと思います。
よろしくお願いします。

該当のソースコード

$(function(){
var buttons = document.getElementsByTagName('button');
for ( var i = 0; i < buttons.length; i ++ ) {
buttons[i].onclick = function() {
var keyword = document.getElementById('a1');
if ( keyword.value.length > 0 ) {
keyword.value += '';
}
keyword.value += this.value;
}
}
});

$(function(){
var buttons = document.getElementsByTagName('button');
for ( var i = 0; i < buttons.length; i ++ ) {
buttons[i].onclick = function() {
var keyword = document.getElementById('a2');
if ( keyword.value.length > 0 ) {
keyword.value += '';
}
keyword.value += this.value;
}
}
});

該当のソースコード

<input name="password" class="formtext"  id="a1" accesskey="I" style="border-radius:5px;font-size: 150%; 
cursor: auto; background-color: rgb(204, 204, 255);"  
cols="45" wrap="hard" autocomplete="off" placeholder="絵文字入力"required>

<input name="password2" class="formtext" id="a2" accesskey="I" style="border-radius:5px;font-size: 150%; 
cursor: auto; background-color: rgb(204, 204, 255);" 
 cols="45" wrap="hard" autocomplete="off" placeholder="絵文字入力"required>

$iconlist = array(
		'<button type="button" value="&#x1f4aa;"  class="square_btn">&#x1f4aa;</button>',
  		'<button type="button" value="&#x1f347;" class="square_btn">&#x1f347;</button>',
  		'<button type="button" value="&#x26bd;" class="square_btn">&#x26bd;</button>',
		'<button type="button" value="&#x1F3B6;" class="square_btn">&#x1F3B6;</button>',
		'<button type="button" value="&#x1f3ae;" class="square_btn">&#x1f3ae;</button>',
  		'<button type="button" value="&#x1F340;" class="square_btn">&#x1F340;</button>',
		'<button type="button" value="&#x1F35F;" class="square_btn">&#x1F35F;</button>',
  		'<button type="button" value="&#x1F319;" class="square_btn">&#x1F319;</button>',
  		'<button type="button" value="&#x1F35E;" class="square_btn">&#x1F35E;</button>',
		'<button type="button" value="&#x1f3a4;" class="square_btn">&#x1f3a4;</button>',
		);
shuffle($iconlist);

該当のソースコード

<form>
	{foreach from=$iconlist item=iconvalue name=icon}
		{if $smarty.foreach.icon.index == 3}
			<br>
		{/if}
		{if $smarty.foreach.icon.index == 6}
			<br>
		{/if}
		{if $smarty.foreach.icon.index == 9}
			<br>
		{/if}
	{$iconvalue}
	{/foreach}
</form>

Comments

[yambejp]

肝心のボタンに関するHTMLの記載が抜けてます

[paruru]

ご指摘ありがとうございます。追加しました。

Answer 1

buttons[i].onclick に２回代入しているので、後に書かれている方に上書きされてしまっています。

a1, a2どちらか最後にカーソルがあったものに入力させる、という方法が簡単でいいと思います。

var target;

$(function(){
  // a1からカーソルが外れた時にtargetを更新
  document.getElementById('a1').onblur = function () {
    target = this;
  };
  // a2からカーソルが外れた時にtargetを更新
  document.getElementById('a2').onblur = function () {
    target = this;
  };

  var buttons = document.getElementsByTagName('button');
  for ( var i = 0; i < buttons.length; i ++ ) {
    buttons[i].onclick = function() {
      // a1,a2どちらにもカーソルが当たっていなかった場合はa1に入力させる
      if (target == undefined) {
        target = document.getElementById('a1');
      }
      if ( target.value.length > 0 ) {
        target.value += '';
      }
      target.value += this.value;
    }
  }
});

Comments

[paruru]

うまくできました。本当にありがとうございました。