Кнопка “отмены” прямо в текстовом поле


Текстовое поле с возможностью отмены всего написанного вы можете увидеть на многих сайтах.
Такая функция особенно полезна при использовании сенсорных мобильных девайсов. При нажатии на крестик, текст из поля стирается. Не надо долго зажимать 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)



Поделиться с друзьями:

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



Написать комментарий через:

 
       
  • ВКонтакте
  •        
  • Локальный блог
  •  
 
 

Ваш отзыв

Имя *

Почта (скрыта) *

Сайт

Напишите цифрами двa вoceмь двa *

Сообщение

 
Статьи пользователей на ArtKiev Design Studio