HTML : Android 브라우저가 키보드에 "Next"대신 "Go"를 표시하는 이유는 무엇입니까?

HTML : Android 브라우저가 키보드에 "Next"대신 "Go"를 표시하는 이유는 무엇입니까?

---

다음 요소 (이 순서대로)가 포함 된 HTML 로그인 양식이 있습니다.

• input type=text (사용자 이름 입력)
• input type=password (암호)
• input type=submit (로그인 버튼)

포커스가에있을 때 Android 브라우저에 "다음"단추 대신 소프트 키보드에 "이동"단추가 표시되는 이유는 무엇 text input입니까? 이로 인해 사용자 이름을 입력 한 후 사용자가 키보드의 오른쪽 하단 버튼 (일반적으로 올바른 동작)을 누르면 양식이 빈 암호로 제출되어 분명히 작동하지 않기 때문에 사용자가 매우 쉽게 로그인하지 못합니다. . [이 동작은 브라우저가 비밀번호를 기억하도록 설정되어 있고 비밀번호 관리자가 비밀번호를 채울 수있는 경우에 적합합니다. 그러나 아래에서 직접 테스트 할 수 있으므로 여기서는 그렇지 않습니다.]

"다음"버튼이있는 입력 유형 텍스트와 "이동"버튼이있는 입력 유형 비밀번호 (제출 전 마지막 입력)를 갖고 싶습니다.

문제가되는 양식의 예는 https://peda.net/:login에 있습니다 (이 양식에는 입력에 대한 "Enter"키를 감지하는 코드가 포함되어 있으며 마지막으로 보이는 양식 입력에 초점이 맞춰져 있지 않으면 양식 제출을 방지합니다).

이 문제에 대한 실제 해결책을 알고 있습니까? 기본 응용 프로그램을 구현하는 경우 사용할 것임을 알고 있습니다 android:imeOptions="actionNext"( Android 소프트 키 키보드 "이동"버튼을 "다음"으로 변경하는 방법 참조 ). 그러나이 경우 HTML 양식 및 Android 기본 브라우저입니다.

문제는 최소한 다음 구성에서 볼 수 있습니다.

• Android 2.3.4 (Cyanogenmod 7)에서 실행되는 "브라우저"시스템 앱
• Android 4.2.2 (Cyanogenmod 10.1)에서 실행되는 "브라우저"시스템 앱
• Android 4.3.1 (Cyanogenmod 10.2 M1)에서 실행되는 "브라우저"시스템 앱
• Android 4.4.2 (Cyanogenmod 11.0 M3)에서 실행되는 "브라우저"시스템 앱 (AOSP 브라우저)
• Android 5.5.1 (Cyanogenmod 12.1)에서 실행되는 "브라우저"시스템 앱 (AOSP 브라우저) [ "Go"라는 단어 대신 화살표 아이콘이 있음]
• Android 6.0.1 (Cyanogenmod 13.0)에서 실행되는 "브라우저"시스템 앱 (AOSP 브라우저) [ "Go"라는 단어 대신 화살표 아이콘이 있음]

---

웹의 일부 양식 (특히 검색 상자)에는 제출 버튼이없고 Enter 키를 눌러 활성화 할 수 있기 때문에 Android 브라우저는 항상 입력 필드로 이동을 표시합니다 (이동은 Enter와 동일).

대신 일부 Android 버전은 키보드 오른쪽 하단에 탭 키를 표시하여 양식 필드 사이를 쉽게 탐색 할 수 있습니다.

나는 당신이 이러한 행동을 막을 수 없다고 생각합니다.

두 가지 가능한 해결 방법 :

1. 두 입력이 모두 비어 있지 않을 때까지 JavaScript를 사용하여 로그인 양식 제출을 무시하십시오.

   <form name="loginForm" onsubmit="return document.loginForm.user.value != '' && document.loginForm.pass.value != ''">
       <input type="text" name="user">
       <input type="password" name="pass">
       <input type="submit" value="Login">
   </form>
   

2. 깨끗한 솔루션은 새로운 HTML5 사용해야하는 두 입력 설정하는 것입니다 필수 속성을 - 하지만 안드로이드 브라우저는 아직 지원하지 않습니다. 그러나 좋은 접근 방식은 CSSKarma에서 설명한 것과 같은 JavaScript 폴백으로 필수 속성을 보완하는 것 입니다.

---

John의 답변에 추가하기 위해 Android는 항상 텍스트 입력에 '이동'을 추가하고 숫자 입력에 항상 '다음'을 추가합니다 . 이 선택의 책임자가 그들의 논리를 설명하는 것을 듣고 싶습니다.

지금까지 테스트 한 모든 사용자는 키보드의 큰 파란색 버튼이 다음 양식 필드로 이동 한 다음 마지막 양식 필드로 이동하는 버튼이어야한다고 생각했기 때문에 소프트 키보드 디자인은이 점에서 비정상적입니다. 양식을 제출하십시오.

iOS는 모든 양식 필드에 '이동'버튼을 제공하고 필드를 탭할 방법이 없기 때문에이 점에서 더 나쁩니다. Apple이 사람들을 위해 컴퓨터를 단순하게 만드는 것을 좋아한다는 것은 좋은 일이지만, 때로는 단순함을 좋아하는 사람들이 사람들이 모두 바보라고 가정하도록 그늘 질 수 있다고 가정합니다.

그 폭언에 대해 죄송합니다. 제공 할 건설적인 것이 있습니다.

마지막 양식 필드가 type = number이면 Android 및 iOS에서 작동하는 작은 해킹이 있습니다. onfocus = "$ ( '# thisForm'). submit (을 사용하여 양식에 보이지 않는 텍스트 입력을 추가하십시오. ); ". Android에서는이 필드가 잠깐 깜박입니다. iOS에서는 표시되지 않습니다. Android 상황을 더 맛있게 만들기 위해 "이 양식 닫기"와 같은 텍스트 입력 값을 설정하거나 너비를 0으로 설정할 수 있습니다. 그러면 양식 필드의 너비가 0이 아니지만 여전히 매우 작습니다. .

끔찍한 해킹이지만 Google과 Apple의 UI 사용자에게 책임이 있습니다.

---

시청하려는 경우 Chromium 문제입니다. https://bugs.chromium.org/p/chromium/issues/detail?id=410785

다음은 사용자 입력의 "입력"을 변경하여 암호 필드로 "탭"하고 양식을 제출하지 않는 Android의 해결 방법입니다.

http://jsbin.com/zakeza/1/quiet

<form action="?">
  User <input type=text onkeypress=key(event)><br><br>
  Password <input id=pw type=password><br><br>
  <input type=submit>
</form>

<script>
  function key(event) {
    if (event.charCode == 13 && /Android/.test(navigator.userAgent)) {
      event.preventDefault();
      document.getElementById('pw').focus();
    }
  }
</script>

편집 : 참고 Windows Phone도 AndroidUA에 포함되므로 Windows Phone (및 Android Firefox)에서 작동하는 테스트가 필요합니다.

---

Phonegap에서 소프트 키보드의 Go 버튼을 Next로 바꾸기를 참조 하십시오 .

빠른 탐색은이 plunker를 참조하십시오 . 완전한 코드를 따르려면

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<form action="" id="form">
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
  <select name="select" readonly="readonly">
  <option>Select Something</option>
  </select>
  Last name: <input type="text" name="lastname" disabled="disabled">
Select <select name="select" id="selectBox">
               <option>Select Something</option>
       </select>
    Last name: <input type="text" name="lastname">
Select <select name="select" readonly="readonly">
  <option>Select Something</option>
  </select>
  <button type="submit">Submit</button> 
</form>

<script>
(function($) {
    $.fn.enterAsTab = function(options) {
        var settings = $.extend({
            'allowSubmit': false
        }, options);
        $(this).find('input, select, textarea, button').live("keydown", {localSettings: settings}, function(event) {
            if (settings.allowSubmit) {
                var type = $(this).attr("type");
                if (type == "submit") {
                    return true;
                }
            }
            if (event.keyCode == 13) {
                var inputs = $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])");
                var idx = inputs.index(this);
                if (idx == inputs.length - 1) {
                    idx = -1;
                } else {
                    inputs[idx + 1].focus(); // handles submit buttons
                }
                try {
                    inputs[idx + 1].select();
                }
                catch (err) {

                }
                return false;
            }
        });
        return this;
    };
})(jQuery);

$("#form").enterAsTab({ 'allowSubmit': true});
</script>

참고 : 1.9보다 최신 버전의 jquery를 사용 .live()하는 .on()경우 jquery 메서드 를 바꾸는 것을 잊지 마십시오 .

---

We can not prevent this default behavior because there is not input type="next" tag available in HTML as of now. So by default "Go" button appears. Below link having list of available input type tags: http://www.w3schools.com/tags/att_input_type.asp

---

To avoid confusion for user let GO button function as enter button only.

For this use a form tag but to avoid incomplete submissions use disabled attribute on submit button.

$("input:not(.submit)").bind('input',function(){
var isValid = validateInputs();

if(isValid)
                {
                    $('.submit').removeAttr('disabled');
                }
                else
                {
                    $('.submit').attr('disabled','disabled');
                }

});

Now To avoid page reload dont use action or onsubmit attributes in form tag, instead use

$('#formid').submit(function(){

var disabled=$('.submit').attr('disabled');
                if(disabled=='disabled')
                {
                    return;
                }

callOnSubmitFunction();
return false;
}
);

return false is important here to avoid page reload.

with the exception of chrome, the firefox and the default android browsers show a prev and next buttons which will work as tab buttons, so use proper tabindex atrributes on form input element.

ReferenceURL : https://stackoverflow.com/questions/6545086/html-why-does-android-browser-show-go-instead-of-next-in-keyboard