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

フィドル

検索ボタンのマークアップを模倣することに注意してください。つまり、入力を a で囲み、divX ボタンを入力の右側にフローティングさせます。

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 に答える