Why does Android webview display "Next" on the keyboard only if type = "number" and not with type = "text"?

Question

I have a form with several input fields. So I want to move between fields with the next button, but it just works when the input field type is "number". With type = "text" this is not so!

Is this a bug in Android 3.2.1?

My input fields are as follows:

<input type="text" name="..." .... /> --> keyboard "Go" <input type="text" name="..." .... /> --> keyboard "Go" <input type="number" name="..." .... /> --> here it shows the "Next" button on the keyboard <input type="text" name="..." .... /> --> keyboard "Go" 

Answer 1

DennisA is suitable for Android 4.0 and below.

In short, this is not a mistake, but unfortunately how it is implemented in google (I would prefer a consistent GO for all these keys so that you can prevent the default action in JavaScript).

With Android 4.1 (JellyBean), you can change the default behavior by extending WebViewInputConnection: https://github.com/android/platform_frameworks_base/blob/master/core/java/android/webkit/WebViewClassic.java#L379

(participation in hackers)

Answer 2

I suppose you need to indicate that your input is not multi-line, otherwise the next will be replaced by the next

Answer 3

When webkit displays these input fields, it converts them to a class called android.webkit.WebTextView that defines how the on-screen keyboard will look and there seems to be no suitable way to override the ImeOptions set by the WebTextView class

Answer 4

I hope this helps others. I processed it in javascript. I wrote javascript code to show the next button on the right side of each input and select controls. When the user clicks the next button, he goes to the next control. I wrote the following code for this:

  //Move to next crontrol bock var MOVE_TO_NEXT_ID = 'aNext86332'; function bindNext() { var allTags = document.getElementsByTagName('*'); for (var intEle = 0; intEle < allTags.length; intEle++) { if (allTags[intEle].tagName.toLowerCase() == 'input' || allTags[intEle].tagName.toLowerCase() == 'textarea' || allTags[intEle].tagName.toLowerCase() == 'select') { allTags[intEle].addEventListener("focus", function () { //find next input var nextFocus = null; var all = document.getElementsByTagName('*'); var flag = 0; for (var j = 0 ; j < all.length; j++) { if (flag == 1) { if (all[j].tagName.toLowerCase() == 'input' || all[j].tagName.toLowerCase() == 'textarea' || all[j].tagName.toLowerCase() == 'select') { var t = allTags[j]; try { if (t.style.display == 'none') { continue; } else if (t.parentElement.style.display == 'none') { continue; } else if (t.parentElement.parentElement.style.display == 'none') { continue; } else if (t.parentElement.parentElement.parentElement.style.display == 'none') { continue; } else { nextFocus = allTags[j]; break; } } catch (e) { } } } if (this.id == all[j].id) { flag = 1; } } showNext(this, nextFocus); }); allTags[intEle].addEventListener("blur", function () { removeNext(this); }); } } } function moveToNextControl(me, nextObj) { if (nextObj != null) { nextObj.focus(); nextObj.scrollIntoView(true); } } function removeNext(me) { setTimeout(function () { try { var next = document.getElementById(MOVE_TO_NEXT_ID); me.parentElement.removeChild(next); } catch (e) { } }, 300); } function showNext(me, nextObj) { setTimeout(function () { var next = document.createElement("a"); next.className = 'btn btn-default animated fadeIn'; next.innerHTML = 'Next'; next.style.position = 'absolute'; next.style.zIndex = 1; next.style.top = '0'; next.id = MOVE_TO_NEXT_ID; next.style.left = (me.clientWidth - 40) + 'px'; next.addEventListener("click", function () { moveToNextControl(me, nextObj); }); me.parentElement.appendChild(next); }, 500); } //End of Move to next crontrol bock 

then the bindNext function is called as follows:

  window.onload = function () { bindNext(); }