輸入'X'圖標以便在開始輸入時清除字段

Question

搜索輸入使用藥丸形狀的角落並添加一個「x」圖標以在開始輸入時清除字段。

我可以對普通文本框做同樣的事嗎？看到小提琴請：

Answer 1

只需添加data-type="search"到文本輸入，並且將接收相同風格的搜索框，但這也將包括馬gnifying玻璃，這裏有一些選擇：

FIDDLE

有點擺弄周圍，想出了這個：

FIDDLE2

Answer 2

可以使用val()方法清除的定期輸入值。

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

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

• val()
• prev()
• focus()

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