gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 07:13:19 26 4
gpt4 key购买 nike

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

最佳答案

为什么不直接使用

<input type="search">

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

关于jquery - 提取jquery mobile的可清除文本框的功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23011198/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com