Question

Screenshot of What i need exactly. <br>

我已经实施了移动网站。但是我已经使用了普通的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">

？在兼容的浏览器中它只是简单的工作我相信移动设备的支持非常好。

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

1 个答案: