We are using React Native for mobile app development. We have WebView component where are some predefined input fields placed in the text of WebView html.
The problem is that when we select input field for edit - View is not scrolled to show actual input when keyboard appears.
We cant use
<preference name="fullscreen" value="true" />
since we are using out custom navigation bar to control the application state.
The best description of this problem was found here:
input field hidden when soft keyboard appears in phonegap
But none of the variants worked for us.
Related
I am testing my app on Android. When an input field selected and ion-select selected key leaves an overlay, a white background is shown after the keyboard closes. The recorded video link is below:
https://imgur.com/o04R8AE
code : https://github.com/Shamran-Gouse/demoapp
I have tried android:windowSoftInputMode="adjustNothing" but then I cant see below form, I also tried the Ionic Keyboard plugin
It shouldn't happen
We have a Xamarin Forms View with just a Toolbar and a WebView.
ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="TestApp"
x:Class="TestApp.Client.Views.MainPage">
<ContentPage.ToolbarItems>
<ToolbarItem
Order="Primary"
Icon="ic_settings.png"
Clicked="OnSettingsClicked"
AutomationId="mnuSettings"
Priority="1"
x:Name="mnuSettings"
Text="Settings"
/>
</ContentPage.ToolbarItems>
<WebView"
Source="{Binding URL}">
</WebView>
When the WebView contains a HTML text field and the field gets the focus, the soft keyboard opens but hides the text field. We are currently using Xamarin.Forms 3.6. We have tried already many things, which we found on th web, but nothing worked, yet.
When we put the WebView inside a ScrollView, together with an Xamarin Form Entry Field, the entry field moves up, when the soft keyboard displays, which means that the AdjustResize behavior seems to work basically, but not with the WebView.
Setting the WindowSoftInputMode to AdjustResize does not change anything.
Does anyone have an idea?
You can solve this problem by the following steps:
1 Detect whether soft keyboard is showing using code like:
var inputMethodManager = (InputMethodManager)this.GetSystemService(Context.InputMethodService);
var keyboardIsShown = inputMethodManager.IsAcceptingText;
2 Commit an animation to scroll up the page when keyboard is showing.
3 Commit an animation to scroll down the page when keyboard is hidden.
<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 built an app with PhoneGap Build for Android. It works fine until you open any text input - after that status bar overlaps webview and stays there.
http://i.stack.imgur.com/CxZX2.png
http://i.stack.imgur.com/m6noH.png
This is the same question like this one
Phonegap: Android 6 status bar overlaps webview
but i don't want to disable the Full-Screenmode.
I think it is not possible to force to disable the Fullscreen mode (all the time). Right?
If so:
My idea/workaround is to hide the statusBar after focus out.
If this possible with phonegab build?
Thanks in advance!
My workaround:
add this to your config.xml
<plugin name="cordova-plugin-statusbar" source="npm"/>
and add this to your in your js file
$(document).click(function()
{
StatusBar.hide();
});
I currently have a cordova android application that uses the following html5 tag:
<input type="datetime-local"/>
On android this triggers the keyboard to show up. However, I want to disable the keyboard because it doesn't make sense because the widget itself is sufficient. You don't need the keyboard showing.
However, I can't figure out how to disable the keyboard from popping up.
Thanks,
D
Add "readonly" attribute to your input tag. It will prevent the triggering of keyboard.