H5 モバイル入力に関する考察

clearイベントを処理する場合、clearイベントをトリガーするための絶対位置要素が右側に追加されます。

また、フォーカスを失ったときにクリアボタンを隠す必要があります。

onBlur={/*** ****/}

すると、クリアボタンのzIndexがどんなに高くても、ぼかしイベントだけがトリガーされ、クリアボタンのクリックイベントはトリガーされないことがわかりました。Blurイベントの呼び出し解除がトリガーになります。

そこで思いついたのですが、アプレットのネイティブフォームにはパススルーがあります。つまり、zIndexがどのように設定されていても、イベントの優先順位はinputが一番高いのです。

blurイベントが最初に発生し、clearボタンshowClear ? <img src={../XXX/clear} /> : nullイベントがトリガされません。

それを発動させるには2つの方法があります：

1) ボタンを非表示にする場合visibility: !showClear ? 'hidden': 'visible'

2) ボタンを隠すdisplay:  !showClear ? 'none' : 'block'

1. ブラーイベントは非同期でトリガーされます：

   onBlur = { => { /*/ }) }.