Let's say I have a field and a button. The button submits the field and triggers some AJAX request which returns data to the same page. Every time the button is clicked, the field is deselected/blurred. This can be partially fixed by making the button focus the text field upon its click. However, during the click, there is a brief moment where the field blurs. The way I have my page set up this does not look good. I would like to completely prevent the field from blurring throughout the click. What is the easiest way to do this? Thanks!
Code:
<input type="text" id="f" autofocus/><span id="btn" onclick="document.getElementById('f').focus()"></span>
Instead of handling button click you can move the focus on button focus with a very small timeout:
jQuery:
$('#btn').focus(function (event) {
setTimeout(function () {
$('#f').focus();
}, 5);
});
JavaScript:
document.getElementById('btn').onfocus = function (event) {
setTimeout(function (event) {
document.getElementById('f').focus();
}, 5);
};
Related
I'm attempting to prevent a user from clicking a link and it going to another page while any input is focused. Sometimes the only available space around the input and the keyboard is a link and some users click the link accidentally. I'm trying to make it so when they click the link it blurs the input (closes the keyboard) and prevents the page from following the link. Then let them click the link again if they want to go to another page after the input is no longer in focus.
html
<input type="text">
Example
I've tried the following...
jQuery
$('a').on('click', function (event) {
if ($('input').is(":focus")) {
console.log('focused');
event.preventDefault();
}
});
(nothing gets logged)
Also tried this...
if ($('input').is(":focus")) {
$('a').on('click', function (event) {
event.preventDefault();
$('input').each(function(){
$(this).trigger('blur');
});
});
}
Neither one prevent the page from going to whatever link was clicked...
I don't think you can do this. You can disable the click event on the links while input is focused, and enable it back again when blur occurs on the input elements. However, while if user clicks on a link while focused on the input element blur event will occur first (which would enable clicking) then click even occurs and links acts as normal.
You could try disabling the links while input elements have focus, then you can enable them on the first click and restore normal operation.
$("input").on("focus", function() {
$("a").on("click", function (event) {
event.preventDefault();
$("a").off();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
example
I think I found a solution.
HTML
Example.com
jQuery
$('input').on('focus', function () {
$('a').each(function(){
$(this).addClass('cant-click');
});
});
$(document).on('touchend', function (e) {
if (!$(e.target).closest('input').length) {
$('a').each(function(){
$(this).removeClass('cant-click');
});
}
});
CSS
a.cant-click { pointer-events: none; }
When the input takes focus, every link gets this class. When anything on the page is clicked that is not an input, it removes this class from every link.
I'm trying to create an Ajax enabled webform, and have created a simple page. On the page, I have a div that contains the value I wish to edit.
I've got working javascript to add a text input box around the contents of the div, complete with a Save button to post back to the web server, but unlike the example I'm following, I don't want a cancel button, instead I want the cancel operation to be triggered by the input box losing focus.
I've added a onblur event to the text input box to cancel the edit operation and return the form back to it's original unedited state (and not save the change).
The problem I'm having, is that when I click the 'Save' button, the onblur event of the text input box is also triggered. How can I stop this happening?
The edit function (called when a user clicks on the text to be edited) is as follows:
function edit(obj)
{
Element.hide(obj);
var textarea = '<div id="'+obj.id+'_editor"><div class="fieldvalueedit"><input type="text" id="'+obj.id+'_edit" name="'+obj.id+'" rows="1" size="64" value="'+obj.innerHTML+'"></div>';
var button = '<div class="fieldvaluebuttons"><input id="'+obj.id+'_save" type="button" value="Save"/></div></div>';
new Insertion.After(obj, textarea+button);
document.getElementById(obj.id+'_edit').focus();
Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
Event.observe(obj.id+'_edit', 'blur', function(){cleanUp(obj)}, false);
}
Instead of using an onblur event on input you can register an onclick event on the document that resets the textareas state, then cancel the propagation of this event when the save button is clicked (you will want to apply this to the text area as well).
Event.observe(obj.id+'_save', 'click', function( e ){
e.stopPropagation();
saveChanges(obj);
}, false);
Event.observe(document, 'click', function(){cleanUp(obj)}, false);
I have a function called showHide() that alternately shows and hides a text input field and a button (button2) when another button (button1) is clicked. The text input field is automatically focused when it opens, and this works great.
The HTML looks roughly thus:
<button1>Show/Hide</button>
<form>
<input class="hidden" type="text" />
<button2 type="submit">Submit</button>
</form>
<script type="text/javascript">
$("button1.someSelectors").click(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
</script>
I would like to extend the function such that when the input field loses focus it and button1 disappear, unless it loses focus because button1 is being clicked. As it reads now I'm only testing whether the input field has focus or not. How can I also check whether button2 is being clicked or not?
I tried:
$("input.someSelectors").blur(function() {
if (!$("button2.someSelectors").is(":focus")) {
showHide();
}
});
but it hid the form elements even when I tried clicking button2.
An alternative would be to test whether button2 is being clicked or not in the "hide" part of the function, but when I added
if(!$("button2.someSelectors").click()) {do the hide part of the function}
to showHide(), the form got submitted when I clicked button1 or button2. Here is an example of my problem. Can anyone help?
--Edit:
var showHide=function(item, category) {
if($("input."+item+"."+category).hasClass("hidden")) {
$("input."+item+"."+category).show("fast").focus().removeClass("hidden");
$("button.buy."+item+"."+category).show("fast");
$("button.purchase."+item+"."+category).text("Never mind!");
} else {
$("input."+item).hide("fast").addClass("hidden");
$("button.buy."+item).hide("fast");
$("button.purchase."+item).text("Purchase");
}
}
blur event on textbox is triggered before the click event fires on the button. In order to avoid that you can use mousedown event instead of click event which will be triggered before click event. Try this
$("button1.someSelectors").mousedown(function() {showHide();});
$("input.someSelectors").blur(function() {showHide();})
We have a lot of inputs in a document.
We want to open a dialog that generates text and puts that in the currently focused input.
The problem is that, when I click a button or anything else to open the dialog that input loses focus. I can't determine which input has to get the generated text.
$("#button").click(function(){
// something should goes here to prevent stealing inputs focus
});
Is there any solution to prevent stealing focus by that special button?
You could not use a form button and just use say a <span> make it behave like a button?
UPDATE:
You could use something like
$('span').hover(function(){
focused_element = $("*:focus").get(0);
});
$('span').click(function(){
focused_element.focus();
});
Check out my fiddle
Does your field have a unique ID? If it does, use that ID to set the focus back to the field when the dialog's save/close button is clicked.
Don't worry about having the focus stolen as much as resetting it once you are done.
My solution would be to handle every focus and save it in focusEle:
$(function () {
var focusEle;
$('*').focus(function () {
focusEle = this;
});
$('button').click(function (e) {
console.log(focusEle);
var c = confirm('Love the cat :3?');
$(focusEle).focus();
});
});
With HTML as:
<input type="text">
<button>Press me!</button>
Example is working: http://jsfiddle.net/76uv7/
Depending on #ggzone idea
I have a simple search page with a single input box.
I want to be able to trigger the search action either by clicking "Go" or by pressing Enter in the input box. I did it like this:
$("input[name='entry']").keyup(function (event) {
if (event.keyCode == 13) {
search_phone();
}
});
$('a#go').click(function () {
search_phone();
});
Is there a more elegant way to do this? Like with bind and trigger, or fling. If so, how?
Not much can you improve here. Your code is pretty good.
You could skip the anonymous function for the click event.
$('a#go').click(search_phone);
I would just make your "go" link the submit button
<input type="submit" name="submit" value="go"/>
And then just bind your function to the submit (which would happen either from pressing enter while in the text box or by clicking the go button.
$('#my_form').submit(search_phone);