移動端テキスト入力ボックスは「検索」機能を備え、Xを修正する.

9074 ワード

APP開発/H 5

まず、プロジェクトは需要があって、H 5で携帯電話のappを開発して、私は初めてシステムの接触H 5の知識に比べて、少し心得があって、記録します.
主にhtml 5の、input[type=search]属性を利用して実現され、このときinputとtype=textは外観と機能に違いはない.
htmlコードは下に入ります:しかしキーボードの右下隅をクリックして検索を実現して、要求を送信して、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();
    //        

    }
});

//方法2以下は原文引用://両方使えます.一つはformにidを付けることです.一つはinput要素にidを加えることです//アップルの携帯電話にform要素を追加する必要があります.そうしないと機能しか実現できませんが、キーボードの文字は検索文字にはなりません.

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

上記2種類のモニタリングユーザが「検索」ボタンをクリックする方法について、実際のテストを行ったことがある.結果は:1.アップルの携帯電話では、inputの外にformラベルをつけなければならない.そうしないと、最終的に検索機能を実現することができるが、入力方式には「検索」ではなく「完了」ボタンが表示されている.2.第1の方法は、formに対してkeypressイベントを監視し、実行可能であり、ユーザーが画面上でクリックするたびにボタン値を取ることができる.しかし、第2の方法は、formバインドsearchに対してもinputバインドsearchイベントに対しても、携帯電話chromeにおいても、携帯電話Firefoxにおいても、取ったキー値は常にundefinedである、すなわちキー値を取ることができない.この方法は,私はしばらく疑問に思っている.
注意が必要なのは、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;
}

訂正:実地テストを経て、第2の方法は実行可能である.

//     :
$('#keyForm').bind('search', function (event) {
   //        
    event.preventDefault();
    $('#txt_key').blur();
    btn_search_click();
});

bind searchイベントを発見した場合、keyCode値を監視する必要はなく、「検索」ボタンをクリックすると自動的にsearchイベントがトリガーされます!しかし、1点注意:1.資料を調べたところ、searchにはeventというパラメータはないことが分かった.formのデフォルトのコミット動作を阻止することはできません.1回目の検索でページ全体がリフレッシュされ、ぐるぐる回ることになる.とても効果が悪かった~~どうしようかな?
第1の方法に置き換えるか、次のようにします.

"return false;"  action="">
        "search" placeholder="      " οnsearch="findBuss();"/>

formに1つ追加するοnsubmit="return false;"デフォルトのコミット動作を阻止し、ページのリフレッシュを阻止する目的を達成します.
参照先:https://www.cnblogs.com/lst619247/p/9292947.html大神の肩を踏んで、やはり前人の分かち合いに感謝します!

微信ウィジェット開発に必要な関連技術

【COCOS 2 D-HTML 5開発の二】cococos 2 d-html 5プロジェクト定義メンバー、ローカル変数、関数メモエッセイ