提取jquery mobile的功能以清除文本框

Question

Screenshot of What i need exactly.

我已经实现了一个移动网站。但我为此使用了普通的 JQuery v1.7.2。 现在我面临一个问题，我无法制作一个可清除的文本框，它支持并在所有设备上运行良好。

我尝试使用clearableTextField 插件。
当我在桌面浏览器中使用我的移动网站时，这工作正常。但是当我在移动设备中获取移动站点时，它只有在我没有改变设备方向的情况下才有效。倾斜设备时，位置会移动到某个位置。
如果我在 android 中修复相同的问题，它在 iOS 设备中不起作用（有时它可以工作，有时它不是）

毕竟，我开始检查我得到的所有例子。唯一有效的是http://api.jquerymobile.com/textinput/

是否可以单独从中提取函数？

这里是 jQuery mobile js 文件中的代码。
http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js

(function( $, undefined ) {

    $.widget( "mobile.textinput", $.mobile.textinput, {
        options: {
            clearBtn: false,
            clearBtnText: "Clear text"
        },

        _create: function() {
            this._super();

            if ( !!this.options.clearBtn || this.isSearch ) {
                this._addClearBtn();
            }
        },

        clearButton: function() {

            return $( "<a href='#' class='ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all" +
    "' title='" + this.options.clearBtnText + "'>" + this.options.clearBtnText + "</a>" );

        },

        _clearBtnClick: function( event ) {
            this.element.val( "" )
                    .focus()
                    .trigger( "change" );

            this._clearBtn.addClass( "ui-input-clear-hidden" );
            event.preventDefault();
        },

        _addClearBtn: function() {

            if ( !this.options.enhanced ) {
                this._enhanceClear();
            }

            $.extend( this, {
                _clearBtn: this.widget().find("a.ui-input-clear")
            });

            this._bindClearEvents();

            this._toggleClear();

        },

        _enhanceClear: function() {

            this.clearButton().appendTo( this.widget() );
            this.widget().addClass( "ui-input-has-clear" );

        },

        _bindClearEvents: function() {

            this._on( this._clearBtn, {
                "click": "_clearBtnClick"
            });

            this._on({
                "keyup": "_toggleClear",
                "change": "_toggleClear",
                "input": "_toggleClear",
                "focus": "_toggleClear",
                "blur": "_toggleClear",
                "cut": "_toggleClear",
                "paste": "_toggleClear"

            });

        },

        _unbindClear: function() {
            this._off( this._clearBtn, "click");
            this._off( this.element, "keyup change input focus blur cut paste" );
        },

        _setOptions: function( options ) {
            this._super( options );

            if ( options.clearBtn !== undefined &&
                !this.element.is( "textarea, :jqmData(type='range')" ) ) {
                if ( options.clearBtn ) {
                    this._addClearBtn();
                } else {
                    this._destroyClear();
                }
            }

            if ( options.clearBtnText !== undefined && this._clearBtn !== undefined ) {
                this._clearBtn.text( options.clearBtnText )
                    .attr("title", options.clearBtnText);
            }
        },

        _toggleClear: function() {
            this._delay( "_toggleClearClass", 0 );
        },

        _toggleClearClass: function() {
            this._clearBtn.toggleClass( "ui-input-clear-hidden", !this.element.val() );
        },

        _destroyClear: function() {
            this.widget().removeClass( "ui-input-has-clear" );
            this._unbindClear();
            this._clearBtn.remove();
        },

        _destroy: function() {
            this._super();
            this._destroyClear();
        }

    });

})( jQuery );

Answer 1

为什么不直接使用

<input type="search">

？在兼容的浏览器中，它可以正常工作。我相信移动设备上的支持非常好。