javascript フォーカスの範囲について

Question

<input type="text" name="" value="" placeholder="名/室" readonly="" id="countInput">
<div class="pulldown" style="display:none;">
<p>
hogehogehogehogehogehogehoge
<button>+</button>
<input type = "number">
<button>-</button>
</p>
</div>

.pulldown{
  padding: 18px;
  border: 1px solid gray;
}

$('#countInput').on("focus", function(){
	$('.pulldown').show();
}).on("blur", function(){
	$('.pulldown').hide();
});

フォーカスの範囲についての質問です。
フォーカスするとpulldownが出現しますが、プルダウン内のclickなどは、フォーカスを外したくありません。
できれば、イベントはフォーカス固定でお願いします。あとinputタグも固定でお願いします。

Answer 1

求める答えとは違うかもしれませんが、
要は値が編集可能なコンボボックスを作りたいのだと推測します。

datalistを使うのではダメでしょうか？

<input list="pulldown" id="countInput" placeholder="名/室" />
<datalist id="pulldown">
    <option>hogehogehogehogehogehogehoge</option>
    <option>fugafugafugafugafugafugafuga</option>
    <option>piyopiyopiyopiyopiyopiyopiyo</option>
</datalist>

動きはこちらで確認できます。

Comments

[SHIVA]

はい、その通りです。
しかし、ボックスの中に複数のボタンを作りたいです。。

Answer 2

すみません、フォーカスの考えが間違っていたみたいです。
以下のサイトで解決しました。
https://www.plusdesign.co.jp/blog/?p=5468

Answer 3

フォーカスするとpulldownが出現しますが、プルダウン内のclickなどは、フォーカスを外したくありません

ちょっと何が言いたいかわかりませんが
違うものクリックすればフォーカスは当然外れますし、
外れたらそのclickイベントをみて再度フォーカスすればよいのでは？