2

搜索输入采用药丸形角设计，并在您开始输入后添加一个“x”图标以清除该字段。

我可以对常规文本框做同样的事情吗？请参阅小提琴：http: //jsfiddle.net/nvWnx/1/

4

4 回答 4

4

只需添加data-type="search"到文本输入，它就会收到与搜索框相同的样式，但也会包括放大镜，这里有一些选项：

小提琴

稍微摆弄了一下，想出了这个：

小提琴2

于 2012-09-02T21:58:02.313 回答
2

您可以使用val()方法来清除常规输入的值。

$('#X').click(function(){
   $(this).prev().val("").focus();
   // $(this).remove()
})

http://jsfiddle.net/nvWnx/3/

于 2012-09-02T21:35:39.377 回答
2

将其包装在插件中：

(function($) {
    $.fn.addClearButton = function(width) {
        if (typeof width === 'undefined') width = '50%';
        this.wrap('<div class="ui-input-search ui-shadow-inset ui-btn-corner-all ui-btn-shadow ui-icon-searchfield ui-body-c"></div>').bind('input keyup', function() {
            $(this).next().css('display', ($(this).val() !== '') ? 'inline-block' : 'none');
        }).parent().css({backgroundSize: '0 0', paddingLeft: 10, width: width}).append($('<a title="clear text" class="ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" href="#" data-theme="c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">clear text</span><span class="ui-icon ui-icon-delete ui-icon-shadow"></span></span></a>').click(function() {
            $(this).hide().prev().val('').focus();
        }));
    };
})(jQuery);

//the width parameter is optional.
$('#basic').addClearButton(200);
//integers are treated as px, can accept % and em between quotes too e.g. '77%'

小提琴

请注意，它将模仿 Search 按钮的标记，即将输入包装在 adiv中以将 X 按钮浮动在输入的右侧。

如果您将 jQuery 从 1.6.2 升级到 1.7+，请将.bind..on

编辑删除搜索图标。

添加了可选的宽度参数。

于 2012-09-02T22:00:14.820 回答
0

你可以尝试这样的事情： 

(function($, undefined) {
  $.fn.clearable = function() {
    var $this = this;
    $this.wrap('<div class="clear-holder" />');
    var helper = $('<span class="clear-helper">&times;</span>');
    $this.parent().append(helper);
    $this.parent().on('keyup', function() {
      if ($this.val()) {
        helper.show();
        helper.css('display', 'inline-block');
      } else helper.hide();
    });
    helper.click(function() {
      $this.val("");
      helper.hide();
    });
    $this.on('focus', function() {
      helper.show();
    });
  };
})(jQuery);


  $('#myInput').clearable();
.clear-holder{
    position:relative;
    float:left;  
}
.clear-helper{
    margin-top:4px;
    text-align:center;
    position:absolute;
    right:4px;
    height:16px;
    width:16px;
    font-size:13px;
    cursor: pointer;
    display:none;
    background:#e0e0e0;
    border-radius:16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="myInput" type="text"/>

于 2016-11-21T14:25:04.790 回答