Android-html-вход теряет фокус при открытии программной клавиатуры (ASP.net)

Я написал форму входа в веб-страницу в ASP.net.

Используя Nexus 4, Android Android 4.2.1, собственный браузер Chrome – когда я нажимаю на поля <input> , появляется мягкая клавиатура, а затем поле сразу теряет фокус. Мне нужно снова щелкнуть поле <input> если клавиатура уже открыта для ввода текста.

Этого не происходит в 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="eg joebloggs12" runat="server"></asp:TextBox> <label for="Password">Password</label> <asp:TextBox ID="password" runat="server" placeholder="eg 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> 

Который выглядит в браузере следующим образом:

 <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="eg 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="eg 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> 

Мое подозрение в том, что ViewState как-то ворует фокус. Но я попробовал event.stopPropogation() который не помог.


Временное исправление

На данный момент я решился на хакерское исправление, заставив фокус вернуться к элементу <input> 700 миллисекунд после щелчка:

 jQuery('input').bind('click',function(evt) { var focusClosure = (function(inputElem) {return function() {console.log(inputElem.focus());}}($(evt.target))); window.setTimeout(focusClosure, 700); }); 

Я обнаружил, что это не связано с ASP.net или ViewState.

Когда появится клавиатура Android, окно браузера будет изменено – запуск события изменения размера .

У меня было что-то похожее на следующее:

 // Move the navigation on resize $(window).bind('resize', function() { if(maxWidth <= 710px) { $('.nav').after($('.main-content')); } }); того, как // Move the navigation on resize $(window).bind('resize', function() { if(maxWidth <= 710px) { $('.nav').after($('.main-content')); } }); 

Это переместило навигацию в DOM. Я предполагаю, что это перерисовывает DOM и поэтому вызывает что-либо в DOM, чтобы терять фокус. Я остановил это от изменения размера – это происходит только при загрузке начальной страницы.

У меня была аналогичная проблема, мой подход, чтобы предотвратить изменение размера для выполнения, если вход находится в фокусе, решает проблему:

 $(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 } }); 

Я нашел другое решение

Сначала вам нужно создать функцию

 function getFocus(campo){ $(window).bind('resize', function() { if(windowWidth <= 1025) { $(campo).focus(); } }); } 

И когда вы нажимаете на вход, вы вызываете функцию

 $('input').click(function(){ getFocus(this); }); 

Это работает для меня

Intereting Posts
Android обнаруживает или блокирует плавающие / накладывающиеся приложения Android: видеоплеер, как приложение Dailymotion Захват экрана GLSurfaceView для растрового изображения Android – .nomedia не работает для изображений Android открыть или создать базу данных Список всех установленных сертификатов на Android Определите первоначальную дату покупки приложения для Android Пользовательский маркер Android Maps v2 имеет неправильное положение при масштабировании Разработка приложений Omniauth и Iphone / Android Клавиатура Android Emulator не отображается Могу ли я использовать Cobertura на модульных тестах с помощью PowerMock? ActionItem потерян на экране вращения Android Studio: «Предупреждение libpng: iCCP: не распознавание известного профиля sRGB, который был отредактирован» Устройства Gingerbread, не использующие стиль Holo от Theme.AppCompat (библиотека поддержки) Как найти имя файла, который передается через прямой режим Wi-Fi в android?