I need to trigger event when user selects text in android touch device.In web browsers am able to trigger event by checking on each mouse up event whether window.getselection is null.
Touch select text event not triggering.
document.addEventListener('touchend', function(event)
{
if( window.getSelection){
t = window.getSelection().toString();
alert(t);
}
});
I tried in touchend event.But when user selects text event not triggering.
Why not try a jQuery solution using the .change() function? First you add the jQuery library immediately above your included JavaScript file declaration, then you've got jQuery capability in the document. Next read up on .change() and try something like:
$('#touchend').change(function(){
if(your condition){var $t = window.getSelection().toString();}
});
or whatever JavaScript code you want in the function. jQuery is simply a JavaScript library, so you can use it freely with your JavaScript. It's a gamechanger!
You actually want to listen to the event selectionchange.
Note that it will fire for both creating a selection and clearing the selection so when you get that event, you want to query the selection with window.getSelection() and check the status of isCollapsed.
Related
Html has many event types. I'm trying to simulate login with javascript code in a .hta . I try the following on a text input element:
user.focus();
user.value = 'JohnDoe';
user.blur();
button.click();
Yet the page responds as if I had clicked the button without entering a user name. I suspect that an event handler is registered on the element which isn't fired when I do this with a script. What van I do to establish the cause of the failure and amend it? How do I simulate the other event types on the element?
I found the answer here: How to trigger event in JavaScript?
Here's the recipe:
function fireevent(type, ele)
{
var event = win.document.createEvent("HTMLEvents");
event.initEvent(type, true, true);
ele.dispatchEvent(event);
}
Where win is the window in question. fireevent('change', user) fires a change event on the text input element user, and that was what I needed to do. Now it works :)
Beware though that createEvent is now deprecated. On IE10, which is the one I use with .hta, it works just fine.
I wrote a Chrome Extension that automatically fills some registration forms. There are some select fields that need to be triggered on "change" event in order to start some Ajax calls.
First I use JQuery attr or val to change the value of the select field, and than I use .trigger to invoke the "change" event, but this last one doesn't work.
Example:
I want to select the option that contains the word "London" and invoke
the change element in order to start some operations of the native
code that have some listeners on "change" event
jQuery("#SelectElement option:contains('London')").attr("selected", "selected");
jQuery("#SelectElement").trigger("change"); <--- not works
I tried also:
jQuery("#SelectElement option:containt('London')").attr("selected", "selected").change();
But if I try this code on console, it works.
Suggestions?
I had the same problem and as far as I know it's because of something called framework event listeners. that you cannot trigger from your code by jquery! but the solution is trigger the event this way:
$(selector)[0].dispatchEvent(new Event("eventName"))
In my case,
var event = new CustomEvent('change');
did not work.
I had to initialize the event like this:
var evt = document.createEvent("HTMLEvents");
evt.initEvent("keyup", true, true);
First arg 'bubbles' should be true so the event should bubble up through the event chain.
event.initEvent(type, bubbles, cancelable);
Source:
https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent
When using jquery .change on an input the event will only be fired when the input loses focus
In my case, I need to make a call to the service (check if value is valid) as soon as the input value is changed. How could I accomplish this?
UPDATED for clarification and example
examples: http://jsfiddle.net/pxfunc/5kpeJ/
Method 1. input event
In modern browsers use the input event. This event will fire when the user is typing into a text field, pasting, undoing, basically anytime the value changed from one value to another.
In jQuery do that like this
$('#someInput').bind('input', function() {
$(this).val() // get the current value of the input field.
});
starting with jQuery 1.7, replace bind with on:
$('#someInput').on('input', function() {
$(this).val() // get the current value of the input field.
});
Method 2. keyup event
For older browsers use the keyup event (this will fire once a key on the keyboard has been released, this event can give a sort of false positive because when "w" is released the input value is changed and the keyup event fires, but also when the "shift" key is released the keyup event fires but no change has been made to the input.). Also this method doesn't fire if the user right-clicks and pastes from the context menu:
$('#someInput').keyup(function() {
$(this).val() // get the current value of the input field.
});
Method 3. Timer (setInterval or setTimeout)
To get around the limitations of keyup you can set a timer to periodically check the value of the input to determine a change in value. You can use setInterval or setTimeout to do this timer check. See the marked answer on this SO question: jQuery textbox change event or see the fiddle for a working example using focus and blur events to start and stop the timer for a specific input field
If you've got HTML5:
oninput (fires only when a change actually happens, but does so immediately)
Otherwise you need to check for all these events which might indicate a change to the input element's value:
onchange
onkeyup (not keydown or keypress as the input's value won't have the new keystroke in it yet)
onpaste (when supported)
and maybe:
onmouseup (I'm not sure about this one)
With HTML5 and without using jQuery, you can using the input event:
var input = document.querySelector('input');
input.addEventListener('input', function()
{
console.log('input changed to: ', input.value);
});
This will fire each time the input's text changes.
Supported in IE9+ and other browsers.
Try it live in a jsFiddle here.
As others already suggested, the solution in your case is to sniff multiple events.
Plugins doing this job often listen for the following events:
$input.on('change keydown keypress keyup mousedown click mouseup', handler);
If you think it may fit, you can add focus, blur and other events too.
I suggest not to exceed in the events to listen, as it loads in the browser memory further procedures to execute according to the user's behaviour.
Attention: note that changing the value of an input element with JavaScript (e.g. through the jQuery .val() method) won't fire any of the events above.
(Reference: https://api.jquery.com/change/).
// .blur is triggered when element loses focus
$('#target').blur(function() {
alert($(this).val());
});
// To trigger manually use:
$('#target').blur();
If you want the event to be fired whenever something is changed within the element then you could use the keyup event.
There are jQuery events like keyup and keypress which you can use with input HTML Elements.
You could additionally use the blur() event.
This covers every change to an input using jQuery 1.7 and above:
$(".inputElement").on("input", null, null, callbackFunction);
I have an <input type=text> with focusout event handler
I have a <button> with click event handler
Focusout checks whether format in input box is correct. It does so by testing input value against a regular expression. If it fails it displays a message (a div fades-in and -out after some time) and refocuses my input by calling
window.setTimout(function() { $(this).focus(); }, 10);
since I can't refocus in focusout event handler. focusout event can't be cancelled either. Just FYI.
Click collects data from input elements and sends it using Ajax.
The problem
When user TABs their way through the form everything is fine. When a certain input box failes formatting check it gets refocused immediately after user presses TAB.
But when user doesn't use TAB but instead clicks on each individual input field everything works fine until they click the button. focusout fires and sets time-out for refocusing. Since time-out is so short focusing happens afterwards and then click event fires and issues an Ajax request.
Question
I have implemented my formatting check as an independent jQuery plugin that I want to keep that way. It uses .live() to attach focusout on all input fields with a particular attribute where format regular expression is defined.
Data submission is also generic and I don't want to make it dependant on formatting plugin. They should both stay independent.
How can I prevent click event from executing without making these two plugins dependant?
Example code I'm fiddling with
After some searching I've seen that all major browser support document.activeElement but I can't make it work in Chrome. FF and IE both report this being the active element, but Chrome always says it's BODY that is active even though click fired on the button element.
Check this code http://jsfiddle.net/Anp4b/1/ and click on the button. Test with Chrome and some other browser and see the difference.
You could use a flag...
Live demo: http://jsfiddle.net/Anp4b/4/
So your question is:
How can I prevent click event from executing without making these two plugins dependent?
Well, you obviously cannot prevent the click event. If the user wants to click the button, he will, and the click event will trigger. There's nothing you can do about that.
So the answer to the above question is: You cannot.
Based on the current conditions, you have to - inside the click handler - retrieve the validation result, and based on that result, decide if form submission should or should not occur.
JS Code:
$("#Name").focusout(function(){
var that = this;
valid = this.value.length ? true : false;
!valid && window.setTimeout(function() {
$(that).focus();
}, 0);
});
$("#Confirm").click(function(e) {
if ( !valid ) { return false; }
e.preventDefault();
alert('AJAX-TIME :)');
});
HTML Code:
<input type="text" id="Name">
<button id="Confirm">OK</button>
Is there are reason you use .focusout instead of .blur?
Using a flag is a good idea, but I would rather use a class on the element. By using classes to determine the state you can also style it accordingly. Here's my example based on your fiddle.
Another solution that hopefully gives the result you are looking for.
1) Create a named click handler:
var clickHandler = function(e){ /** submit form or whatever you want to do**/ };
$("button").click(clickHandler);
2) Add the following to the focusout event when it's failing validation:
$("button").unbind("click", clickHandler).one("click", function(){ button.click(clickHandler); return false;});
You can find an example of this here.
I have an ASP.NET datepicker control (no source available ) which produces an image element, which when clicked shows a calendar. I want to disable or enable on demand the image through JavaScript. When I added the 'disabled' attribute to the img element, some script in the page always goes in a busy state and the page never finishes rendering. My guess the disabled attribute is causing a conflict in some way.
My next attempt now is to disable the custom click event which the ASP.NET control adds unoptrusively. How do I disable the click event? How do I re-enable it so that the img works back as normal. I am also using jQuery 1.4.
var $img = $('img#yourid'),
handler = $img.get(0).onclick; // previous click handler
// unbind
$img.unbind('click').click(function(){
alert('new click');
});
// rebind
$img.unbind('click').click(handler);
You might need to check other events also (mousedown mouseup etc).
I have an example here, which swaps all of the click events to a hidden div, and then back again to re-enable:
http://jsfiddle.net/Jbs9V/
There might be some shortcuts to do this, but this works. Likewise, you could store the click handlers in a global var and load them from that:
http://jsfiddle.net/8ZKJR/
I think that the bug could be happen because the datepicker uses the text control to do its stuff, but if the control is disabled, datepicker cannot continue, but you can use other attribute to do almost the same thing, use the attribute readonly in your tag:
readonly="readonly"
you can use the attribute readonly in your html input.
hope this helps.
You can use unbind() to remove any custom event handler using jquery.