How to stop focusout(blur) on submit? For Phonegap

Question

I am trying to stop the focusout(blur) event when i click submit for a textinput.

I just dont want the textinput to lose focus and stop closing the soft keyboard.

I tried doing this below to avoid the focusout, but that prevents me closing the keyboard all together when i need to. Any Idea?

textarea.addEventListener("blur", function() {
  setTimeout(function() {
    textarea.focus();
  }, 0);
});

Edit var mousedownHappened = false;

$('input').blur(function() {
    if(mousedownHappened) // cancel the blur event
    {
        alert('stay focused!');
        $('input').focus();
        mousedownHappened = false;
    }
    else   // blur event is okay
    {
        // Do stuff...
    }
});

$('a').mousedown(function() {
    mousedownHappened = true;
});

guvenckardas · Answer 1 · 2015-09-10T12:11:40.730

1

html:

<input type="text" id="test" name="test" />
<input type="submit" value="focus" id="submit"/>

js:

document.getElementById('submit').addEventListener("click",function(e){
                e.preventDefault();
            document.getElementById('test').focus();
        });

edited Sep 10 '15 at 12:11

answered Sep 10 '15 at 10:32

guvenckardas

738
4
8

For some reason when i test it on jsfiddle it works but when i put it into phonegap and test it on my mobile device, when i click the submit button, it just closes the keyboard and no eventlistener was fired, but then when the keyboard is closed and i click it again, then its fired. – John Sep 10 '15 at 11:04
Can you try 'touchstart' event? – guvenckardas Sep 10 '15 at 11:05
I think when you click on the submit button, some layer or something must be clicked. Can you try $(document).on('click' , function(e) {alert(e.target); .. – guvenckardas Sep 10 '15 at 11:10
Hii I just added the document on click to alert e.target, it does give an alert [object HTMLDivElement], then close out my keyboard. But doesnt fire the focus event. But when the keyboard is closed then it can triggers it. – John Sep 10 '15 at 11:58
I did more searching, there is another thread for similar issue, but it requires Angular JS and it seems like i can't focusout the event.I still want to focus out when the background is clicked, just dont want to focusout when the submit button is clicked, so i can send another message. http://stackoverflow.com/questions/27969613/how-to-prevent-cordova-to-hide-the-keyboard-when-the-input-loses-the-focus – John Sep 10 '15 at 12:02
Just try alert(e.target.nodeName) or alert(e.target.id) – guvenckardas Sep 10 '15 at 12:02
Hi just tried the e.target.nodeName it returned DIV, but when the keyboard is closed and triggering the focusin, then it returned IMG, so seems like when keyboard is up, my submit button(i put an image for it) isnt getting clicked. But some DIV on top is, and that click triggers the close keyboard. Not sure what to do. – John Sep 10 '15 at 12:09
1

Good! Just I said before, you can't click button at the first time and that's the problem. Can you share demo like your code in jsfiddle or etc. But before please try the code I edited. (e.preventDefault()) – guvenckardas Sep 10 '15 at 12:11
Ahh ok, i will try it, the problem is, if i open the jsfiddle on my phone, that works, but when i package it into Phonegap/Cordova, then that problem i have occurs. I will try your edit now. – John Sep 10 '15 at 12:13
Just tried it, made no difference. Not sure if i will have to use the Angular JS. Not sure why the focusout event is blinded and can't prevent it from happening. Just did more research, going to try these code (In Edit). – John Sep 10 '15 at 12:17
I think that, angular js or etc. is not your real solution. You just trigger the function of click for input – guvenckardas Sep 10 '15 at 12:26
thanks yer, just tried it,the edit that i just posted it works, and dont want to add Angular.js because i dont want to add in the whole angular.js for just 1 function.. – John Sep 10 '15 at 12:37

score 0 · Answer 2 · answered Sep 10 '15 at 12:38

If you are using Phonegap use this solution.

$('input').blur(function() {
    if(mousedownHappened) // cancel the blur event
    {
        alert('stay focused!');
        $('input').focus();
        mousedownHappened = false;
    }
    else   // blur event is okay
    {
        // Do stuff...
    }
});

$('a').mousedown(function() {
    mousedownHappened = true;
});

How to stop focusout(blur) on submit? For Phonegap

2 Answers2