提取可移动文本框的jquery mobile功能

Question

Screenshot of What i need exactly.”>

我已经建立了一个移动网站。但是我为此使用了普通的JQuery v1.7.2。现在，我面临一个问题，就是我无法创建一个可清除的文本框，该文本框在所有设备上均支持并正常工作。我尝试使用clearableTextField插件。 当我将我的移动网站带到桌面浏览器时，这工作正常。但是，当我将mobil网站放在移动设备中时，只有在不更改设备方向的情况下，它才起作用。倾斜设备时，位置会移到某处。如果我在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

为什么不只是使用