モバイル側input入力ボックスはキーボード付き「検索」機能を実現し、Xを修正する

4930 ワード

javascript

主にhtml 5の、input[type=search]属性を利用して実現され、このときinputとtype=textは外観と機能に違いはない.
htmlコードの入力:

<form action="" id="myform">
<input type="search" id="input" value="" placeholder="    " results="5" />
form>

ただし、キーボードの右下隅をクリックして検索し、要求を送信するには、jsコードは次のようになります(次のコードセグメントはjqueryを導入することを覚えています).

//   
$("#myform").on('keypress', function(e) {
    var keycode = e.keyCode;
    var searchName = $(this).val();
　　//keycode   ，13          enter 
    if(keycode == '13') {
    alert(2)
    e.preventDefault();
    //        

    }
});
//   
//      ,     form  id     input   id
//          form      ,                       
  $('#myform').bind('search', function () {
    //coding
      alert(1);
  });
    /*$('#input').bind('search', function () {
        
        alert(1);
    });*/

注意が必要なのは、input[type=search]は、ユーザーが入力すると、デフォルトでは入力ボックスの一番右側に自動的に「X」が表示され、ユーザーがクリックして入力した内容をクリアしやすいようにするためですが、このXのデフォルトスタイルは機種が異なる可能性があります.
私たちは往々にしてこのXを修正したり、直接削除したりする必要がありますが、どのように実現すればいいのでしょうか.答えは簡単です.CSS属性が1つあればいいです.コードは以下の通りです.

 input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;/*          ×*/
}

     -webkit-search-cancel-button          ，            ；

input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;

    position: relative;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #EBEBEB;
}

input[type=search]::-webkit-search-cancel-button:after{
    position: absolute;
    content: 'x';
    left: 25%;
    top: -12%;
    font-size: 20px;
    color: #fff;
}

転載先:https://www.cnblogs.com/web-wjg/p/8681383.html

テキストドメイン(textarea)の高度な適応実現の2つの方法

検索ボックスにテキストを入力するとメッセージが消えます