Hiding soft keyboards on mobile devices when using contenteditable divs - javascript

I am using contenteditable divs for a page to be viewed by mobile devices to get input for some stuff. I want the soft keyboard to hide when the user presses enter, instead of the normal action of enter in a div. My first attempt at getting it to work looks something like this:
if event.keyCode == 13 #enter
event.preventDefault() #to prevent the normal behaviour of enter
#$("#the_editable_div").blur()
However, it seems like this does not work as it would with an input. The div loses focus but the keyboard does not hide on either iOS or android.
I have also tried the solution at Closing keyboard on iPad in div contenteditable but found that it did not work. If I focus on another text field and blur on iOS stuff it still does not close the keyboard, and on android I have found that it changes the keyboard to one used for regular fields, where pressing enter again will close the keyboard, but that is not the expected behaviour of it closing immediately when enter is pressed in the contenteditable div field. This seems strange to me since if I were to tap on that input field myself and then blur it via javascript then the keyboard closes properly.
Is there a way to have a contenteditable div that closes the soft keyboards on android and iOS devices when enter is pressed when that div is focused?

This workaround works fine, at least with Android (I can't test on iPad) :
<input type="text" id="ghostInput" style="position:absolute;top:-50px" />
<div id="myDiv" contenteditable="true" style="width:100%;height:100px;background-color:yellow"></div>
<script>
var ghostInput = document.getElementById("ghostInput");
ghostInput.onfocus = function () {
ghostInput.blur();
}
document.getElementById("myDiv").onkeydown = function (e) {
if (e.keyCode == 13) ghostInput.focus();
}
</script>

Related

How to take input on a mobile site without a input field

The user needs to press the key X for the function to run and it works perfectly where there is a physical keyboard but how can I force a virtual keyboard on the mobile version? I can't think of a way to do this without adding an input field.
document.addEventListener("keyup", function(event) {
if (event.keyCode === 88) {
newx();
}
});
function newx()
{alert("Hello");
}
<h1>Key in X</h1>
The repl I'm using this for -> https://home.ajkallivayalil.repl.co/
After some searching on Google, I came up with this, but I suggest you make another user experience, as #95faf8e76605e973 said. (e.g. a button)
If you have some sort of input field and make it hidden, like using display: none or visibility: hidden, you can use JavaScript to activate it anytime, thus bringing up a keyboard.
To do this, you just have to use .focus() on your element.
A link to the SO page I found.

Opening mobile keyboard on button click

On my webpage, I have a "register now" button in the header. On click this button will scroll the user to the bottom of the page and will, ideally, focus on a form field input and open the soft keyboard on mobile devices.
I am currently executing a .focus and .click state to the element after the smooth scroll function ends. While these two statuses are being applied, they are not opening the keyboard as desired.
componentDidMount = () => {
Events.scrollEvent.register('end', function(to, element) {
if(element.id === 'request-demo'){
var inputFocus = document.getElementById('name');
inputFocus.focus(console.log("focused"));
inputFocus.click(console.log("clicked"));
}
Events.scrollEvent.remove('end');
});
}
This function will open the keyboard on Android devices, but not IOS.
I am avoiding jQuery for this project, so vanilla solutions would be preferred
IOS will not allow developers to simulate user inputs within react-scroll's scrollEvent. By removing the focus and click states from within the end of scroll event, we were able to resolve this issue
Our current interpretation is that IOS blocks developers from simulating user inputs within on event functions, however any further insight would still be greatly appreciated

Events stop firing when focused on readonly input on iPhone

I have readonly input filed:
<div class="wrapper">
<input type="text" readonly="readonly" />
</div>
it has "click" and "focus" events attached. Everything works well on all browsers except safari on iPhone (tested on iPhone 5, and iPhone 6). After few clicks on input field blue text cursor appears and input is no longer accepting clicks (event is not firing).
I read in similar question that you can just fire blur event on input when focused, but I need to keep track of focused element (I'm using focusin and focusout events on wrapper).
In addition I need this field to be focusable by Tab key on other browsers.
here is my code:
https://jsfiddle.net/0tr1afv2/
[edit]
I've changed the order of log message appearing - now on jsfiddle newer are on top. The screenshot is showing the log in other way.
I recently had issues with the click event using mobile devices. Try adding the following to your javascript:
input.addEventListener("touchstart", function () {c.log("input click");});
More information on the subject here:
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events

PhoneGap: JavaScript Focus and Blur event in iOS / Android

I would like to detect the focus and blur event in HTML input text box in a PhoneGap mobile application.
For iOS, the behaviour is as expected - When the textbox is in focus (textbox is clicked), alert message Focus! is displayed. When the textbox loses focus (keyboard is closed / move on to next input box), alert message Blur! is shown.
However, for Android, when I click the textbox (the textbox is in focus), alert message Focus! and Blur! are displayed continuously which means that it is focus, blur, focus, blur, ...
How can this be avoided so that it can align with iOS?
In JavaScript:
var txtValue = document.getElementByID('txtValue');
txtValue.addEventListener('focus', function() {
alert('Focus!');
});
txtValue.addEventListener('blur', function() {
alert('Blur!');
});
In HTML:
<input type="text" id="txtValue" />
This is because when you show the alert, focus goes into that dialog, losing it from the input field and dispatching blur event. And when you close the dialog, focus goes back into input field, dispatching focus event.
I don't know the exact fix for this. Maybe using custom overlay dialog / lightbox instead of window.alert() could be one solution.
Other option could be comparing where the event is dispatched from, eg (not tested):
var txtValue = document.getElementById('txtValue');
txtValue.addEventListener('focus', function(evt) {
if (evt.nodeName && evt.nodeName.toLowerCase() === 'input') {
alert('focus!');
}
});

Android keyboard keeps appearing after closed

I have a textarea in my html. When the user taps on it, the keyboard properly pops up. After hitting the keyboard close button, the keyboard keeps appearing when tapping elsewhere on the screen. Is there a way to have keyboard only appear on input taps?
The following bit of jquery code does the trick:
$(window).bind('touchstart', function (e) {
if (!$(e.target).is(':input')) {
$(':input').blur();
}
});
Basically, I catch every tap; if the target is not an input field, blur all the input fields, which in effect hides the silly keyboard.

Categories