input type=「search」実装検索ボックス

詳細
文字検索機能を実現するには、入力を要求すると、キーボードのリターンボタンのプロンプトが「検索」と表示されます.
参照先:https://segmentfault.com/a/1190000007765742
スタート~
input type=textではこのような効果は得られませんが、googleではhtml 5の増加したtype=searchができます(ただし、input type=searchの外パンにaction属性のあるformが必要です).
 

 
 
しかしtype=searchには多くのデフォルトのスタイルと動作があり、今回の開発で出会ったのは以下の通りです.
検索履歴がデフォルトのドロップダウン・ボックスに表示されます.
入力時に自動的に「x」をポップアップし、「x」のスタイルは異なる携帯電話で、スタイルは異なる.
IOS携帯(試験時はiphone 6 ios 10)上の入力ボックスは楕円形である.
しかし、スタイルは私たちがカスタマイズしたスタイルで表示され、各携帯電話で統一されることを望んでいます.
そこで何度もgoogleを経て、答えを得ました.
input autocomplete=「off」を設定して、ポップアップのドロップダウンボックスを削除します.
デフォルトのxを非表示にする:

input[type="search"]::-webkit-search-cancel-button{
    display: none;
}

 
iosに対してスタイルを設定し、iosの下のinput楕円形を除去します:

-webkit-appearance: none;

 
検索をコミットするときにajaxを使用したい場合は、フォームのデフォルトの動作をブロックすることを忘れないでください.
 

container.on('submit', '.input-kw-form', function(event){
    event.preventDefault();
})

 
【拡張:】
H 5 input type="search"検索解決方法を表示しない
IOS(ipad iPhoneなど)システムのブラウザでH 5ページを開きます.次のように書きます.

以上のデバイスのキーボードに「改行」が表示されます.
解決策は、inputの外にformをネストすることです.

    
    form    action。 
  

actionが欲しくない場合は、inputのコミットロジックに影響を与える可能性があるので、onsubmit onclickなどの方法を書き直して実現することができます.
簡単な方法でaction=「javascript:return true;」を使用することもできます.
【注意事項】
フォームに1つしかない場合は、テキストボックスにフォーカスを取得し、「戻る」をクリックするとformが自動的にコミットされます.コミットパスはactionプロパティで現在のパスに接続されます(actionプロパティのデフォルトは空の文字列です.formにactionプロパティがない場合、コミットパスは現在のパスと同じです).
ブラウザ表現:Chrome(テーブルクロス版、モバイル版)でこの問題が発生し、Android携帯電話で発生します.Safari(デスクトップ版、モバイル版)は表示されません.
解決方法:フォームのコミットを禁止する
1に設定
2 name属性のない非表示テキストボックスを追加

          3   input keydown   
     
input.addEventListener('keydown', function(e){
    var keywd = e.target.value;
    if(event.keyCode == 13 && keywd) { 
        e.preventDefault();
    } 
});
    
  
  
.