I have a form. In it I have a textarea which expands when onclick.
But there is a little problem:
When the user tries to submit the form (click the submit button), the textarea jumps back to its normal size. This is because it uses the onblur function. I want to eliminate this awkwardness, because the user has to click the submit button twice to submit the form.
What should I do to make it work with one click?
You can set a short timeout in the onblur handler that shrinks the text area:
document.getElementById("textareaID").onblur = function () {
var target = this;
setTimeout( function () {
//Code to shrink the textarea, use "target" instead of "this" for scoping reasons.
}, 250);
}
textArea.addEventListener('blur', function(e) {
e.preventDefault();
return false;
}, true);
This will add a listener to the blur event which will prevent anything else from firing, including whatever it is that's causing the textarea to re-resize. It'd be easier for you to not add the blur hook in the first place, rather than catching it this way, though.
Related
I have a button.when click button, show a dialog to select data.
If click the button so fast,multi dialog will be show.
At present，I have two way to solve this problem
1.use disabled
2.use setTimeout and clearTimeout
have any other better way to solve this problem?
thank you very much
explain:
if use disabled,after dialog close,need to set the button available.
at present,I use this code
Util.prototype.lazyTriggerEvent = function(buttonId,event,callback){
var searchTrigger=null;
$("#"+buttonId).bind(event,function(){
var text = $.trim($(this).val());
clearTimeout(searchTrigger);
searchTrigger = setTimeout(function(){
callback(text);
},500);
})
};
//Util.lazyTriggerEvent("showDialgBtnId","click",function(){})
if click button trigger a ajax，and have much more button like this，is a best common way to solve this problem.
You can use jquery's .one() handler which limits a function to running once:
JQuery's .one() handler
Description: Attach a handler to an event for the elements. The
handler is executed at most once per element per event type.
$('button').one('click', function() {
// Do stuff
});
Or you can also disable the button on click:
$('button').click(function() {
$(this).prop('disabled', true);
// Do stuff
});
To re-enable the button, you can simply add the following to your close modal function:
$('button').prop('disabled', false);
I suppose when you want to show a dialogue, you execute a function called showDialogue() .
In your showDialogue(), you'll be able to check whether your dialogue was initiated.
Keep your mind off the button. Focus on the showDialogue().
If your dialogue was initiated, then do not execute the rest of your code in showDialogue(), as if showDialogue() isn't executed twice. It gives an illusion that the multi click isn't working. Is it the solution you desire, without disable and setTimeout?
Use disabled at first, and then when the dialog displays, enable the button.
From the image, is it possible to identify the iOS 'Done' button click event using javascript/jQuery? The iOS keyboard click events can identify using 'onkeypress' function for the text-area.
If that field is part of the form, Done will trigger "onsubmit" event of the form.
One approach is to set a timeout, which occurs on every form element's onblur (which is dispatched) and is cleared on every element's onfocus.
Brief example in jQuery as an explanation:
var blurOccurred;
$("input")
.on("blur", function(evt) {
blurOccurred = window.setTimeout(function() {
alert('Done button clicked');
}, 10);
})
.on("focus", function(evt) {
window.clearTimeout(blurOccurred);
});
By doing this, clicking "done" is detected with 10ms delay. And if it's just navigating to prev / next form field, whole timeout won't be executed.
I'll hope this get you started.
Edit: on iOS7 there is event.relatedTarget property, which is null when "done" is clicked - otherwise it's the input element where the focus is set on. Also this can be used for detecting whether done is clicked (or keyboard is closed).
i have:
<input type="text" />
and
$('input').blur(function(){
alert('stay focused!');
});
I want to prevent the blur function running when I'm "blurring" by clicking on an anchor element.
I.E. if i tab to another input, click somewhere on the page etc i want the blur to fire, but if i click a link, I don't want it to fire.
Is this easily achievable, or do i need to hack about with delegates and semaphores?
Thanks
I had to solve this problem myself today, too. I found that the mousedown event fires before the blur event, so all you need to do is set a variable that indicates that a mousedown event occurred first, and then manage your blur event appropriately if so.
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;
});
Hope this helps you!!
If you want to keep the cursor at its position in a contenteditable element, simply:
$('button').mousedown(function(){return false;});
Delay the blur a bit. If the viewer clicks a link to another page, the page should change before this code gets a chance to run:
$('input').blur(function(){
setTimeout(function() {alert('stay focused!');}, 1000);
});
You can experiment with what delay value for the timeout seems appropriate.
You can get this behavior by calling preventDefault() in the mousedown event of the control being clicked (that would otherwise take focus). For example:
btn.addEventListener('mousedown', function (event) {
event.preventDefault()
})
btn.addEventListener('click', function(ev) {
input.value += '#'
input.setSelectionRange(ta.value.length, ta.value.length)
})
See live example here.
Some clarification that was too long to put in a comment.
The click event represents both pressing the mouse button down, AND releasing it on a particular element.
The blur event fires when an element loses focus, and an element can lose focus when the user "clicks" off of the element. But notice the behavior. An element gets blurred as soon as you press your mouse DOWN. You don't have to release.
That is the reason why blur gets fired before click.
A solution, depending on your circumstances, is to call preventDefault on mousedown and touchstart events. These events always (I can't find concrete documentation on this, but articles/SO posts/testing seem to confirm this) fire before blur.
This is the basis of Jens Jensen's answer.
From the image, is it possible to identify the iOS 'Done' button click event using javascript/jQuery? The iOS keyboard click events can identify using 'onkeypress' function for the text-area.
If that field is part of the form, Done will trigger "onsubmit" event of the form.
One approach is to set a timeout, which occurs on every form element's onblur (which is dispatched) and is cleared on every element's onfocus.
Brief example in jQuery as an explanation:
var blurOccurred;
$("input")
.on("blur", function(evt) {
blurOccurred = window.setTimeout(function() {
alert('Done button clicked');
}, 10);
})
.on("focus", function(evt) {
window.clearTimeout(blurOccurred);
});
By doing this, clicking "done" is detected with 10ms delay. And if it's just navigating to prev / next form field, whole timeout won't be executed.
I'll hope this get you started.
Edit: on iOS7 there is event.relatedTarget property, which is null when "done" is clicked - otherwise it's the input element where the focus is set on. Also this can be used for detecting whether done is clicked (or keyboard is closed).
I have a form with multiple fields. I have jquery blur event handlers on all the fields that do some validation when you navigate away from a field. The problem is, if you are ever focused on a field, and then you click on any other link on the page, it validates the field but never allows the link to be clicked (or form be submitted).
$('.required').bind('blur', function(event) {
validateAll($(event.target));
});
function validateAll(elm) {
//blah blah
return false;
}
The validateAll function just does a check and returns false after.
Basically, when a user is focused on a field, they must click any button twice in order for it to work. The first one activates the blur validation, and then second one actually clicks through the link.
Any ideas as to what is going on?
I found a few other posts similar to this.
The common solution is to try adding a delay in your blur event handler, like so:
$('.required').bind('blur', function(event) {
setTimeout(function()
{
validateAll($(event.target));
}, 10);
});
Hope this helps...
You're not returning validateAll in your blur handler, although you said it "just does a check and returns false after". If it's returning false to try and prevent further event bubbling, you'd want to return that rather than just calling validateAll (and doing nothing with what it returns).
Don't see how any of that would cause the problem you're describing, but maybe I'm just misunderstanding the issue.