如何使用 TextBoxFor 在 ASP.NET 中检测清除类型“搜索”HTML5 输入？答案

【问题标题】：How do you detect the clearing of a type “search” HTML5 input in ASP.NET using TextBoxFor?如何使用 TextBoxFor 在 ASP.NET 中检测清除类型“搜索”HTML5 输入？
【发布时间】：2016-11-15 02:10:05
【问题描述】：

当在 type="search" 文本字段 action upon pressing X button 上按下“X”按钮时，我看到了类似的检测和分配动作的解决方案。我想使用 @Html.TextBoxFor(model => model.SearchTerm, new { id = "search-box", type = "search"}。但是，它不能专门在清除按钮“X”单击时触发事件。

到目前为止，我已经成功注册了所有事件：

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

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

任何帮助将不胜感激

【问题讨论】：

您的要求是@Html.TextBoxfor 中的'X' 按钮，并且每当点击'X' 时，文本框都会变为空。对吧？
@SunilKumar 它会在按下“X”时清除文本框中的文本而没有任何代码，但我的要求是在用户单击“X”按钮时重定向到主页。

标签： html jquery asp.net razor jquery-events

【解决方案1】：

我尝试了以下代码：

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:

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

希望对你有所帮助.. :)

快乐编码..

【讨论】：