Is there any way to "disable" focus of an element (textarea, input, contentEditable iframe)?
I know the blur function takes away the focus, but the user can just go back and focus it again.
I'm asking this because there will be a point in my site where a sort of a prompt (inside the page) will ask for something. At this moment, I want to block the focus of all textareas and inputs in the page, and allow it again when the user press "Cancel" or "Ok".
Thank you very much!
To prevent the user from focusing an textarea or input element, you can disable it:
$("#yourControlId").prop("disabled", true);
I'm not sure about a contentEditable iFrame
Related
I have built a small tool that pushes text into a <textarea> with button inputs, you can see it here
However, on mobile, when a user interacts with those buttons, the keyboard pops up obscuring half the screen. Is there anyway to stop this?
Try adding a readonly attribute to the textarea.
I'm trying to dismiss the keyboard via JS in response to a button press, but I'm not having any luck.
Setup:
I have a textarea with accept and cancel buttons tied to it.
Upon clicking the cancel button, my view object will call textAreaElement.blur().
It will then remove the accept and cancel buttons.
Expected:
Field loses focus (visually and otherwise).
Keyboard is dismissed.
Actual:
Field appears to lose focus (visually, no cursor is displayed), and programmatically.
Keyboard is still presented.
I've already tried the usual Google but they all seem to think that calling blur on the focused element should be sufficient. One user even suggested calling $('input').blur() to ensure that all fields were blurred, but that didn't seem to make a difference.
... and I just figured out why this was happening.
I mentioned that I was removing the Accept and Cancel buttons for this field. Specifically the following was taking place:
Call textAreaElement.blur().
Animate the buttons disappearing.
Upon completion of the animation, buttons.remove().
When the Cancel button received the click, it gained focus (the keyboard remained active). When the Cancel button was subsequently removed in the animation completion callback, focus was applied to the previous focusable element, which is the textarea.
So I had the effect of doing:
textarea.blur() # Already doesn't have focus.
buttons.remove() # Removes buttons, applies their focus back to the textarea.
The solution was to instead:
Animate the buttons disappearing.
Wait for completion of the animation, buttons.remove().
Call textAreaElement.blur().
I have a small question.
I want to check inputs after the blur event. A ajax-request should start an count something. So I don't want to check if the user is doing something in the input only after they finished doing something, but what if they focus the input and the users next click is to close the browser window?
Is the blur event is still firing?
Native iOS apps contain "clear buttons" in input fields. They clear the text while maintaining field focus.
I am developing a web app targeted specifically at iOS devices, and not having any luck emulating the behavior. If I overlay another element with a click event to clear & refocus the input, the iPad ignores the call to focus because it begins hiding the keyboard the instant the blur event fires on the input (before the click event). Therefore the user must manually re-focus the field after clicking the clear icon to get back the keyboard.
Is there any way to grab a touch event on the overlay image/icon without the soft keyboard deciding to vanish, or a better way to do this?
daxelrod's 2nd comment above led me to the solution: Trap the mousedown event on the clear icon, stop it, and clear the input. Thereby a "click" never occurs, and the input does not lose focus.
I thought that blur() fired at the browser level before any of the mouse events (down, up, click) did, so I didn't think to try it. Glad to see I was wrong!
In Mootools flavored JS:
document.id('inputClearImage').addEvent('mousedown', function (e) {
e.stop();
document.id('input').set('value', '');
});
I have an input box inside and iframe. If i type and press the back key to erase the text, the back key event is taken as browser back and goes to the previous page. What could be the cause.?
please tell which browser you have tested with.
My guess would be that you have focus outside the field? is there a script putting focus on the document containing ths input box in the iframe?
i even cann't raise same event. I press BackSpace in iframe, I press BackSpace in input, I press BackSpace in main page.
Which browser do you work with?
Is there any javascript code in the page?
This is such an old browser behaviour. Update your browsers. In worst case scenario you can block the default events for the input element, using a jS library to get a unified response en browser events.