Question

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

我可以对常规文本框执行相同的操作吗？请查看小提琴：http://jsfiddle.net/nvWnx/1/

Answer 1

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

FIDDLE

有点摆弄，想出了这个：

FIDDLE2

Answer 2

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

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

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

Answer 3

将其包装在插件中：

(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%'

Fiddle

请注意，它会模仿搜索按钮的标记，即将输入包装在div中，以便将X按钮浮动在输入的右侧。

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

已修改删除搜索图标。

添加了可选的宽度参数。

Answer 4

您可以尝试这样的事情：

(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"/>

输入带有“X”图标的文本，以便在您开始输入后清除字段

4 个答案: