Примерчики

Текстовое поле с возможностью отмены вы можете увидеть на яндексе (если в качестве браузера используете Safari или Google Chrome)

Или на вебораме (они по-моему даже крестик используют одинаковый):

UPD. Как выяснилось, заслуги авторов вышеупомянутых сайтов в этом мало. Дело в том, что если у текстового указано type = 'search', то такой крестик автоматически будет появляться в браузерах Хром и Сафари. Спасибо анонимному читателю за информацию.

Еще такую функцию можно увидеть в Виндуз Виста:

Что и зачем?

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

Особенно такая функция полезна при использовании мобильных девайсов вроде iPod Touch или iPhone. Более того, в i-девайсах такая функция является привычной: в адресной строке браузера там всегда появляется крестик и им постоянно и с удовольствием пользуешься.

За работу

В первый день я создал HTML:

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

Во второй подключил jQuery. 

В третий нарисовал крестик: .

В четвертый создал макет для jQuery-плагина.

В пятый написал плагин. Комменты привожу в коде.

(function($) {
     $.fn.AddXbutton = function(options) {
         var defaults = {
             img: 'x.gif'//расположение картинки крестика по-умолчанию (относительно страницы, на которой находится инпут)
         };
         var opts = $.extend(defaults, options);
         $(this)
         .after($('<input type="image" id="xButton" src="' + opts['img'] + '" />') //после текстового инпута вставляем image-input
                     .css({ 'display': 'none', 'cursor': 'pointer', 'marginLeft': '-15px' })// делаем его стильным
                     .click(function() { //вешаем обработчик на клик
                         $('#searchInput').val('').focus(); 
                         $('#xButton').hide();
                     }))
         .keyup(function() { //на кейап мы проверяем, показывать нам крестик или нет
             if ($(this).val().length > 0) {
                 $('#xButton').show(); //если текст какой-нибудь есть, но показываем
             } else {
                 $('#xButton').hide(); 
             }
         });
         if ($(this).val() != '') $('#xButton').show(); //если при загрузке страницы в текстовом поле что-то есть, крестик надо сразу показать (например, при обновлении страницы)
     };
 })(jQuery);
   

Все. Теперь вызываем функцию AddXbutton при загрузке страницы:

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

Спасибо за внимание!

Смотрим демо Загружаем архив с примером Загружаем плагин

UPD. Спасибо читателям за дельные замечания. Благодаря вам наш несложный плагин эволюционировал и стал более толковым.

Новый код плагина:

(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); 

Демо [Updated] Плагин [Updated]