TextBoxForを使用してASP.NETでタイプ "検索" HTML5入力のクリアをどのように検出しますか？

Question

type = "search"のテキストフィールドで 'X'ボタンを押したときに、アクションを検出して割り当てる際の同様の解決策を見たaction upon pressing X button。 @Html.TextBoxFor(model => model.SearchTerm, new { id = "search-box", type = "search"}を使用したいと思います。ただし、クリアランスボタン ​​'X'をクリックしてイベントを発生させることはできません。

これまでのところ、私はすべてのイベントを登録するために管理している：

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input class="clearable" type="text" name="" value="" placeholder="" /> 

JQuery:：

  $('#search-box').on('click', function (e) { 
      alert(e); 

      System.Diagnostics.Debug.Write(e.target); 
     }); 

すべてのヘルプは大幅に

Answer 1

をいただければ幸い私は、次のコードを試してみました

function tog(v){return v?'addClass':'removeClass';} 
$(document).on('input', '.clearable', function(){ 
    $(this)[tog(this.value)]('x'); 
}).on('mousemove', '.x', function(e){ 
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX'); 
}).on('touchstart click', '.onX', function(ev){ 
    ev.preventDefault(); 
    alert('33');// put window.location('url goes here'); 
    $(this).removeClass('x onX').val('').change(); 
}); 

CSS:

.clearable{ 
    background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center; 
    border: 1px solid #999; 
    padding: 3px 18px 3px 4px;  /* Use the same right padding (18) in jQ! */ 
    border-radius: 3px; 
    transition: background 0.4s; 
} 
.clearable.x { background-position: right 5px center; } /* (jQ) Show icon */ 
.clearable.onX{ cursor: pointer; }    /* (jQ) hover cursor style */ 
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */ 

フィドルはここにある：click here

は、それはあなたのお役に立てば幸いです。.. :)コーディングハッピー

..