Android-html输入在软键盘打开时失去焦点(ASP.net)
我已经在ASP.net中编写了一个网页登录表单 使用Nexus 4,Android 4.2.1,原生Chrome浏览器-当我点击Android-html输入在软键盘打开时失去焦点(ASP.net),android,asp.net,html,input,webforms,Android,Asp.net,Html,Input,Webforms,我已经在ASP.net中编写了一个网页登录表单 使用Nexus 4,Android 4.2.1,原生Chrome浏览器-当我点击字段时,软键盘出现,然后字段立即失去焦点。我必须在键盘已经打开的情况下再次单击字段才能真正输入文本 这不会发生在桌面上的Chrome中 我在ASP用户控件中具有以下登录表单: <asp:Login ID="login_form" runat="server" OnLoginError="OnFail" OnLoggedIn="OnLoggedIn" RenderO
字段时,软键盘出现,然后字段立即失去焦点。我必须在键盘已经打开的情况下再次单击
字段才能真正输入文本
这不会发生在桌面上的Chrome中
我在ASP用户控件中具有以下登录表单:
<asp:Login ID="login_form" runat="server" OnLoginError="OnFail" OnLoggedIn="OnLoggedIn" RenderOuterTable="false" RememberMeSet="True">
<LayoutTemplate>
<asp:Panel runat="server" DefaultButton="LoginButton" CssClass="members-login">
<fieldset>
<label for="UserName">Username</label>
<asp:TextBox ID="username" placeholder="e.g. joebloggs12" runat="server"></asp:TextBox>
<label for="Password">Password</label>
<asp:TextBox ID="password" runat="server" placeholder="e.g. 1234" TextMode="Password"></asp:TextBox>
<label id="RememberMe">Remember me</label>
<asp:CheckBox ID="RememberMe" runat="server" />
<asp:Button CssClass="button" ID="LoginButton" runat="server" CommandName="Login" Text="SUBMIT" />
</fieldset>
</asp:Panel>
</LayoutTemplate>
</asp:Login>
我发现这与ASP.net或ViewState无关 当Android键盘出现时,浏览器窗口将调整大小——触发调整大小事件 我正在运行类似于以下内容的操作:
// Move the navigation on resize
$(window).bind('resize', function() {
if(maxWidth <= 710px) {
$('.nav').after($('.main-content'));
}
});
//在调整大小时移动导航
$(窗口).bind('resize',function(){
如果(maxWidth我找到了其他解决方案
首先,您必须创建一个函数
function getFocus(campo){
$(window).bind('resize', function() {
if(windowWidth <= 1025) {
$(campo).focus();
}
});
}
这对我来说很有效我也遇到过类似的问题,我防止在输入处于焦点时执行调整大小的方法解决了这个问题:
$(window).bind('resize', function() {
if ($("input").is(":focus")) {
// input is in focus, don't do nothing or input loses focus and keyboard dissapears
} else {
// do whatever you should do if resize happens
}
});
需要jQuery
我自己也遇到过这个问题,最终使用了这个解决方案。它可能对其他人有用。在我的情况下,调整大小使搜索栏失去了焦点
// Makes it so that click events are fired on a mobile device.
$('#searchbar').each(function(){
this.onclick = function() {}
});
// Runs an interval 10 times with a 50ms delay. Forces focus.
$("#searchbar").click(function() {
var i = 0;
var interval = window.setInterval(function(){
if(i > 10) {
clearInterval(interval);
}
$("#searchbar").focus();
i++;
}, 50);
});
对于那些在WordPress中遇到此问题的人,请在标题中插入以下代码
<script type="text/javascript">
jQuery(function($) {
$(window).bind('resize', function() {
if ($("input").is(":focus")) {
var focusClosure = (function(inputElem) {return function()
{console.log(inputElem.focus());}}($(evt.target)));
window.setTimeout(focusClosure, 700);
} else {
// Other resize functions
}
});
});
</script>
jQuery(函数($){
$(窗口).bind('resize',function(){
如果($(“输入”)为(“:焦点”)){
var focusClosure=(函数(inputElem){返回函数()
{console.log(inputElem.focus());}}($(evt.target));
设置超时(焦点关闭,700);
}否则{
//其他调整大小功能
}
});
});
我在我的$(窗口)中有自定义代码。调整(..)
大小是我想保留的,并且我想将此解决方法仅限于受影响的特定用例(仅限Android mobile、文本输入或文本区域焦点),因此我提出了以下建议:
function isAndroidTextInputFocus() {
var userAgent = navigator.userAgent.toLowerCase();
var isAndroid = userAgent.indexOf("android") != -1;
var result = (isAndroid &&
($("input[type=text]").is(":focus") || $("textarea").is(":focus"))
);
return result;
}
然后我调整了$(窗口)。调整大小(..)如下:
<div class="members-login" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton')">
<fieldset>
<label for="UserName">Username</label>
<input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$username" type="text" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_username" placeholder="e.g. joebloggs12" />
<label for="Password">Password</label>
<input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$password" type="password" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_password" placeholder="e.g. 1234" />
<label id="RememberMe">Remember me</label>
<input id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_RememberMe" type="checkbox" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$RememberMe" checked="checked" />
<input type="submit" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$LoginButton" value="SUBMIT" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton" class="button" />
</fieldset>
</div>
$(window).resize(function(e) {
if (!isAndroidTextInputFocus()) {
// ... Proceed with my custom Window Resize logic
}
});
我发现有人提到过,但这些似乎都与Java有关——在本机应用程序中。我在网页中找不到任何其他关于此问题的提及。答案是救命稻草。注意:根据我的经验,在Android 4.0.4上,此问题影响本机浏览器,但不影响其他浏览器(Chrome、Firefox,可能还有其他浏览器)。如果您有新问题,请单击按钮提问。如果有助于提供上下文,请包含指向此问题的链接。-@fish\u ball,该问题似乎措词不当,应该是我有类似问题
,这不是新问题,这是有效答案。
function isAndroidTextInputFocus() {
var userAgent = navigator.userAgent.toLowerCase();
var isAndroid = userAgent.indexOf("android") != -1;
var result = (isAndroid &&
($("input[type=text]").is(":focus") || $("textarea").is(":focus"))
);
return result;
}
$(window).resize(function(e) {
if (!isAndroidTextInputFocus()) {
// ... Proceed with my custom Window Resize logic
}
});