I am opening a facebook login page in WebView when user select login field soft keyboard appears. I would like to have a done key button on the soft keyboard, how to do it?
I know we can add the done button by the following code attached with edit field
ediText.setImeOptions(EditorInfo.IME_ACTION_DONE);
But it is HTML form in WebView any clue how to do that?
Because you have no control over the website being shown in the WebView, you are unable to change the type of keyboard that is appearing.
My tests indicate that Android devices will show a "Next" button for every <input type="text" /> or <input type="password" /> field on a website and a "Go" or "Done" button for the last element on the page. If there were some html or css property that could be used to force a different type of keyboard, then you could enable JavaScript in your WebView and execute a JavaScript pseudo url to alter the facebook page's input elements;
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webView.loadUrl("javascript://getElement('signinbox').style.someCssClass='someKeyboardProperty';");
However as stated above, I am unaware of any html/css tag that specifies this. Hope this helps!
Related
<input type="text" class="numberonly">
I want to change the type of this html input from text to number on focus.
$(".numberonly").focus(function(){
$(this).attr("type","number");
});
this jquery works fine but when the webpage is embedded inside the android webview, the android keyboard wont show up on focus. Does jquery .focus prevents default behavior or what? Should I trigger the focus programmaticaly?
e.g.
The second click in the input, brings up the keyboard.
The android default browser has no problem. But the webview inside the android app fails to load keyboard.
I am trying to display keyboard in ionic dynamically with no luck. I have a text field like
<input type="search" placeholder="Search" ng-change="onSearchChange()" ng-click="clicked()" ng-model="searchVal" id="MyField" ng-controller="searchCtrl" >
in clicked function i am navigation to new page like
$state.go("tabs.searchresult");
but there is no keyboard on next page. I want to show keyboard on searchresult.
#nOmi: As my understanding.
You are in the search page has a search box with id = MyField, then you type a keyword. After touch to tap icon or tap enter, it will go to search result page.
In search result page, it also have an input with id = MyField in the top with result below. And you also want to show the keyboard.
If it is, please do so.
$state.go('tabs.searchresult').then(function() {
$('#MyField').focus();//YOU WILL NEED JQUERY FOR THAT ONE.
});
If in the search result page doesn't have any text box. You need to install ionic keyboard plugin to trigger show keyboard dynamically.
The script will be
$state.go('tabs.searchresult').then(function() {
cordova.plugins.Keyboard.show();
});
I have a Textbox on my webpage, how do I disable the keyboard popup on Android/mobile devices? Here is my code:
<input type="text" class="datetimepicker" style="position:relative; top:5px; left:300px;"/>
Make text element disabled or readonly. But remember the difference between disabled and readonly: browser don't send to server disabled elements.
When I tap on input[type=number] element in HTML page (Note: html page has only one input element), the keyboard appear with "NEXT" button.
How can I change this NEXT button to DONE/OK or hide it in android 2.3, is it possible to change/hide it?
you can change the ime options by using below code:
input type="text" style="-ms-image-mode: active; ime-mode: active;
Hope it will help. Thanks
Here's the issue: Initial load of the page fits to the screen. When User click on any input field boxes, the page zooms and it doesn’t come back to its original. So I want to find out a way to zoom-out the page to fit it to the device screen back after the user focus out or hit enter key.
And I tried these setting and it didn't workout
setBuiltInZoomControls(false);
setSupportZoom(false);
setDefaultZoom(ZoomDensity.FAR);
setusewideviewport(true);
You need to add to your html:
<meta name="viewport" content="width=640, user-scalable=no, target-densityDpi=device-dpi">
It's also a good idea to add the next settings to your webview.
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
webView.setInitialScale(1);
settings.setJavaScriptEnabled(true);
settings.setSupportZoom(false);