Отправить заявку

Кнопка «отмены» прямо в текстовом поле

Текстовое поле с возможностью отмены всего написанного вы можете увидеть на многих сайтах. Такая функция особенно полезна при использовании сенсорных мобильных девайсов. При нажатии на крестик, текст из поля стирается. Не надо долго зажимать Backspace или совершать другие телодвижения, вроде Ctrl+A, Del.

<div class="inputWrapper">
         <input id="searchInput" type="text" />
</div> 

Плагин JQuery:

(function($) {
     $.fn.AddXbutton = function(options) {
         var defaults = {
             img: 'x.gif'
         };
         var opts = $.extend(defaults, options);
         $obj = $(this);
         $(this).each(
         function(i) {
             $(this).after(
                 $('<input type="image" id="xButton' + i + '" src="' + opts['img'] + '" />')
                     .css({ 'display': 'none', 'cursor': 'pointer', 'marginLeft': '-15px' })
                     .click(function() {
                         $obj.val('').focus();
                         $("#xButton" + i).hide();
                     }))
             .keyup(function() {
                 if ($(this).val().length > 0) {
                     $("#xButton" + i).show();
                 } else {
                     $("#xButton" + i).hide();
                 }
                 if ($(this).val() != '') $("#xButton" + i).show();
             });
         });
     };
 })(jQuery); 

Вызов плагина:

$(document).ready(function() {
     $('#searchInput').AddXbutton({ img: 'images/x.gif' });
     $('#searchInput').focus();
 });

Не забываем подключать jQuery)

Другие публикации