Input being hidden after focus on mobile browser - javascript

I have an input that appears and gains focus after a button is clicked. The issue is that, on a mobile browser only, after the input gains focus it receives a blur event and the touch keyboard hides. On a desktop browser the blur event doesn't even get received after it receives focus.
I'v tried to call preventDefault on the blur event but the problem is that doesn't help when I want the user to dismiss the input by clicking outside of it.
This is the code that show the input:
$('#searchbar-form').on('show.bs.collapse', function(){
$('#container-main-search').addClass('search-expanded');
});
the input inside #container-main-search has autofocus. This is the input code:
<input type="text" class="form-control searchbar-input" id="searchbar-input" role="searchbox" name="name" autofocus>

Related

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!');
}
});

How to make element not lose focus when button is pressed?

I have a textarea in which I am inserting content at the location of the caret (thanks to Tim Down's answer). It inserts the content when the user presses a button. But it seems that when the button is pressed, the focus on the textarea is lost. How do I keep the focus there, providing the location of the caret is also the same? I was thinking along the lines of using evt.preventDefault() with .focusout(). If that helps.
Handle the mousedown-event instead of the click-event.
The mousedown event will be handled before the focus of another element is lost.
In your mousedown eventhandler, you need to to prevent event default behavior.
e.preventDefault(); // in your mousedown eventhandler
JS-Fiddle demo
You can't stop the focus from moving to a focusable element and still allow the mouse click to have its normal behavior (such as click the button). If you click on an element that supports focus such as a button, it will get the keyboard focus.
It is possible to programmatically put focus back on an element if done properly. If done poorly, it can ruin the usability of a page.
Demo: JSFiddle
You have to renew focus when button is pressed.
HTML code:
<input id="messageBox" autofocus />
<input type="button" id="messageSend" onclick="setFocusToMessageBox()" value="Send" />
Javascript code:
<script>
function setFocusToMessageBox(){
document.getElementById("messageBox").focus();
}
</script>
You can easily do this by applying focus back to the text area programmatically as the button click function is over. This way you can regain the focus along with the click event each time.
Try using tabindex="-1" on button, maybe that'll work.
<input type="text" name="body" id="body" Placeholder="message..">
<input type="submit" value="send" id="sendButton" tabindex="-1">

onfocus is not called when using the autofocus attribute on an input tag

In the following example, I get only one alert box. I read that the focus is put before the JavaScript code is executed. Is there a way to get this to work on?
<input id="i" type="text" autofocus onfocus="alert(1)">
<script type="text/javascript">
document.getElementById('i').addEventListener('focus', function() {
alert(2);
}, false);
</script>
(I have only tested this in Safari)
Edit:
I can obviously do it this way (Prototypejs selector):
var autofocusElement = $$('input[autofocus]')[0];
callListener(autofocusElement);
But it looks ugly compared to only add an event listener.
Edit:
Do not worry over a lack of browser support for the autofocus attribute. It solved easily as I have done in I fiddle links to below. There is also the best solution to the problem as I can see. My question is if I can do it in a less ugly than having to call the listener manually.
http://jsfiddle.net/tellnes/7TMBJ/3/
It works fine in Firefox 3.6 since Firefox does not support autofocus. But in Safari, which supports autofocus, are not the event called.
From the HTML5 working draft:
There must not be more than one
element in the document with the
autofocus attribute specified.
So you're asking for undefined behavior anyway.
With only one autofocus element, under Firefox 3.6, neither of the handlers get called on page load. Manually giving the focus to the element calls both handlers (then proceeds into an infinite loop, due to the alert boxes giving the focus back to the element when closing).
The HTML5 draft does say that autofocus should perform the focusing steps on page load, including raising the focus event, but chances are that browsers are not currently implementing that feature in a complete or consistent manner.
You might want to explicitly call your focus event handler during page load until the HTML5 spec is finished and browsers start aiming for complete support.
The following code from your current example:
<input id="i" type="text" autofocus onfocus="alert(1)">
<script type="text/javascript">
document.getElementById('i').addEventListener('focus', function() {
alert(2);
}, false);
</script>
Is going to cause an infinite loop of alerts going from 1 to 2
[eidt]
because: (this happens only in broswers that support autofocus )
input gets autofocus, fires event which fires an alert, alert grabs focus, click ok, input grabs focus, focus event fires new event triggering now two different alerts (DOM fully loaded now so new event is added with another alert), both alerts grab focus, click ok, click ok, input grabs focus fires new event triggering now two different alerts, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events, input grabs focus, fires both events, alert grabs focus, click ok, next alert grabs focus, click ok, input grabs focus, fires both events...
Textual description of an infinite process FTW!....? :P
[/edit]
In your previous examples with two auto-focuses applied it seems that the last one will be executed as in the example I have attached at the bottom. I also added a way of adding a focus event to each input based on a class name... Not sure if you're looking for that but though it might be of some help.
JSFiddle Example of onfocus event
You need to give a value to autofocus.
<input id="i" type="text" onfocus="alert(1)" autofocus="">
Give autofoucs="autofocus" attribute after all events has been given to the input field.
You can also use addEventListener in .js file at the top.
It might be that the autofocus onfocus event fires before addEventListener adds the event listener.
I replaced autofocus with class="autofocus" on my input element, and set the focus like this near my addEventListener call:
if(searchInput.classList.contains('autofocus')) {
searchInput.focus();
}
If you need to execute a piece of javascript code, onfocus for either input, you could use jQuery: http://api.jquery.com/focus/

What events does an <input type="number" /> fire when its value is changed?

Just wondering whether anyone knows what events an HTML5 <input type="number" /> element fires when its up / down arrows are clicked:
I'm already using an onblur for when the focus leaves the input field.
change would be the event that is fired when the field's value changes.
I think the HTML5 event input would also fire.
I found that for jQuery the following code covered keyboard input, mousewheel changes and button clicks in Chrome, and also handled keyboard input in Firefox
$("input[type=number]").bind('keyup input', function(){
// handle event
});
I found that onkeyup and onchange covered everything in Chrome 19.
This handles direct value input, up down arrow keypress, clicking the buttons and scrolling the mousewheel.
onchange alone would be sufficient in Chrome, but other browsers that only render the field as a text box need the onkeyup binding, which works perfectly to read the new value.
Binding the mousewheel event separately was less successful. The event fired too early - before the field value was updated - and therefore always gave the field's previous value
The onchange event fires on blur but the oninput event fires as you type. Maybe you might want to put a timer on the oninput event and fire your onchange event when the user has stopped typing for a second?
There is a current bug in Edge preventing change or input from firing when using the arrow keys in a number input.

Categories