Keyboard opens always once input get focus in ios device - javascript

The keyboard appears whenever a text input is first responder.In my current application, the keyboard opens when I click on the input, but whenever i click on the "go" or "return" button, it disappears. I want the keyboard to be open by default all the time until / unless the user clicks on any back event.
inputchatvar.focus();
keypressed=false;
$('#inputchat').on('keydown', function(e){
if(e.which == 9) {
e.preventDefault();
e.stopPropagation();
keypressed=true;
onKeyPressed(e,$scope,inputchatvar,spn);
}
});
Is there a way to get focus on input whenever the input box is generated dynamically?

Related

Click event lost after rerendering react (caused by blur event)

Demo : https://codesandbox.io/s/jolly-glitter-zuvr8?file=/src/App.js
I have a section with a text input and a button
I want to refresh the section on blur event of text input (I force refresh with key attribute in my example)
and display a text on click event on the button
The issue : When the focus is on the input text and I click on the button, I have the blur event and the click event at same time.
The click event is ignored.
I thinks the is because the order of JS events are blur, then click.
To reproduce :
No focus on input text, then click on the button => OK
Focus on input text, then click beside on the page, then click on the button => OK
Focus on input text, then click then click on the button => Not OK (the text "clicked" is not displayed) (but with a second click => OK)

Preventing keyboard dismissal on form submit on mobile view of web app

I am creating a PHP Javascript chat application. Whenever I click on send button it simply slides down / dismisses the keyboard. If I need to send a new message I again have to tap on the textarea field to make the keyboard slide up / appear for typing. This unwanted keyboard dismissal after every send is annoying. I haven't included any code here as this is not a coding bug that is occurring from my script. This seems to be the default behavior of the web apps that dismisses the keyboard when the form's submit button is clicked.
The gif below shows what is happening. How can I prevent this default behavior?
https://gifyu.com/image/ABYn
The problem here is every time you click on the send button, the textarea loses focus. Once the textarea loses focus, the on screen keyboard has no reason to be visible. You can solve this by adding a javascript code to your click event so that the on screen keyboard remains there every time after the submit button is clicked.
You can use something like:
const form = document.querySelector(".typing-area"),
inputField = form.querySelector(".input-field"),
sendBtn = form.querySelector("button");
// PREVENT FORM SUBMISSION BY PAGE REFRESH (THE DEFAULT BEHAVIOUR)
form.onsubmit = (e)=> {
e.preventDefault();
}
// ADD FOCUS TO INPUT FIELD BY DEFAULT (ON PAGE LOAD)
inputField.focus();
// PREVENT INPUT FIELD FROM LOOSING FOCUS AFTER SEND BUTTON IS CLICKED
sendBtn.onclick = ()=> {
inputField.focus();
}

check and uncheck the control without using the mouse,as when we hit enter key the button control gets triggered

Currently i have a html design wherein which there is a textbox and a button..after typing the id on pressing enter the page will get redirect,but at the same time there is also a checkbox control.
My question is :
Is there any option to check and uncheck the control without using the mouse,as when we hit enter key the button control gets triggered
For more idea ,i have given a signin window of gmail which contains a textbox and checkbox
This will click the button regardless of where the "Enter" happens on the page:
$(document).keypress(function(e){
if (e.which == 13){
$("#Your_Submit_Button_ID").click();
}
});
hitting enter key will trigger the submit button of the form you are currenlty focused in to. Pressing tab will transfer the focus from one field to another but the enter key will always trigger the submit button of the form.
But you can trap the keypress when hitting enter and perform the check/uncheck instead of the default trigger.
$("form").keypress(function (e) {
if(e.keyCode === 13) {
e.preventDefault();
// code that check/uncheck your checkbox
}
})

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