Thank you for taking the time for reading my question.
A "range" input element in HTML (Slider) fires an onchange -event, in which the content of a span element gets updated with the current value of the input element.
Somehow, the first change made to the input element doesn't fire the onchange event. When an 'onclick' event is used, it does fire.
Here's the code, HTML first:
<div>
<input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"></input>
<span id="main_options_plug1_lengthPE_value"> … </span>
</div>
And now JavaScript:
function setOpenEndPELength(plug)
{
if (plug == "plug1" || plug == "plug2")
{
var slider = document.getElementById("main_options_" + plug + "_lengthPE_input");
var span = document.getElementById("main_options_" + plug + "_lengthPE_value");
span.innerHTML = slider.value + " mm";
}
}
I created a JSFiddle, so you can try it yourself.
I didn't find an answer to this question on stackoverflow so far, any questions i found were about onchange event don't firing at all. In this case, it's only the first change that doesn't work.
Hope someone knows the answer. Any help is greatly appreciated, thanks in advance.
If I understand the question correctly, the problem is that on Firefox, the onchange handler is not executed when you press down mouse button when the cursor is on the button of the slider and move the mouse. It is executed only after you release the mouse button after such a move.
This seems to be the correct behavior (though some other browsers don’t comply), since HTML5 CR says about the change event: “if the element does not have an activation behavior defined but uses a user interface that involves an explicit commit action, then any time the user commits a change to the element's value or list of selected files, the user agent must queue a task to fire a simple event that bubbles named change at the input element.”
That’s a bit complicated formulation, but it is followed by a clarifying example: “A third example of a user interface with a commit action would be a Range controls that use a slider. While the user is dragging the control's knob, input events would fire whenever the position changed, whereas the change event would only fire when the user let go of the knob, committing to a specific value.”
The conclusion is that in this case, you should use the oninput attribute instead of onchange. In practice, onmousemove works too, but oninput is better, since it can be expected to work with input methods that do not use a mouse (whatever they might be, e.g. control by voice).
On document ready try to trigger event manually caused first time change is not occurred.
So just add code as below:
$(“#main_options_plug1_lengthPE_input”).trigger(‘change’)
A little trick, if onchange doesn't fire the first time, add:
onclick="console.log(1)"
Some other action on the click, it still fire the onchange as second time but as first you have the click.
Related
I'm trying to catch the value of an input element every time its value changed. change requires blurring the element so it is not good for my case. I came across this Javascript change event on input element fires on only losing focus question and the accepted answer solved my problem, partly. According to the fiddle the event I should be watching is
$('#name').bind('DOMAttrModified textInput input change keypress paste focus', function () {
.....
})
However it doesn't work so well with characters that require an input method to input. For example, to input Chinese character "長", I'd press "c","h","a","n",“g” and then "space", all these keystrokes are recorded and will fire the events unwantedly - I only want to catch "長" as the input value, and the trigger should only fire when this character appears in the input textbox.
I've tried different combinations of the events, but none of them works. Is there any way to work this around?
How can I trigger a Live validation on an element that is usually validated on a blur event ? I did not find out how I could change the event that trigger the LiveValidation, client sided.
My problem is that some fields'styles are updated using a Live validation, and this update occur on the blur event.
I tried to trigger a blur event on the element, so the style can change even without user interaction.
$(element_id).blur();
..but it did not work. Can I change the event that make LiveValidation react ?
I am assuming that you want to run a function when someone types in a; textarea, input, etc.
There is a simple way where you can add the oninput attribute.
<input type="text" oninput="myFunction()">
If you want to know more about oninput, visit http://www.w3schools.com/jsref/event_oninput.asp
Unfortunately, There is no way to do this on jQuery, as it has not implemented yet.
EDIT:
You are able to do it on jQuery, but there is no handler.
$("input")[0].oninput();
-CowNecromancer
I have to do automated tests on a website and I want to use CasperJS to learn. For proprietary reasons I can not give too much code.
Here is the example of the input that I am trying to fill:
<input data-bind="value: firstname, valueUpdate: ['blur'], css: {valid:(firstname.isValid() )} " title="" class="valid" aria-required="true" id="firstname" name="firstname">
As you can see, this input is not of type text and has no value attribute. Therefore, I can not use the casper.fill() method. Furthermore, if I enter the web page scope using evaluate() and change the input value using document.querySelector, the change will not be permanent as of the events attached to the text change on the input will not be triggered.
Here is my code:
this.waitForSelector('#memberTitle', function then(){
var testname = 'thisIsNotPermanent';
this.evaluate(function(testname){
document.querySelector('#firstname').value = testname;
}, testname);
});
If I capture the screen right after, I will see my text written in the input box. However, if I wait 500ms and take another capture, the text is gone as, I suppose, the events are triggered or just cleaned because it actually failed to trigger correctly.
The events attached to the input are of Blur, Change and Keypress.
Using CasperJS, how could I go to the lowest level possible to mimic a user using his keyboard and fully use the website's functionalities already in place?
The whole point of those tests are to work with what is in place. The idea is to not have to manually go through the JavaScript of the web site.
That's exactly what the casper.sendKeys(selector, keys) function is for which will send native keypresses and (hopefully) trigger the events on that text element:
this.waitForSelector('#memberTitle', function then(){
var testname = 'thisIsNotPermanent';
this.sendKeys('#firstname', testname);
}).wait(20, function(){
this.capture('screenshot.png');
});
<input> elements without a type attribute default to Text type.
This answer is here to complete the question from another angle. As Artjom B. mentionned, the correct way to fill an input and to trigger its events is by using the sendKeys() function. However, if you ever have a case, like mine, where the events will not trigger or will take a certain amount of time, know that you can trigger those manually.
If you use the firefox inspector tool, you will see that your input or tag will have an event attached to it marked as ev. If you select it, you will have a breakdown of all the events, in order, that are triggered.
You can see that the jQuery click() event will be called. In casperjs, from the evaluate scope you can now do this :
this.evaluate(function(){
$(".discard-answer").click();
})
From there, you can chain jQuery events, like in my case where I had to .blur().change().click();
It is important to know if the event is jQuery or not.
Hope this helps.
In my JavaScript/jQuery code, I have a text field that I run an event when the text changes using the keyup event. However currently I only account for changes done using the keyboard.
Is there a way I can detect when a text field text changed because the user did a right click and clicked on cut or delete or paste or undo?
Note: This needs to work in IE9, and preferably Firefox and chrome, but definitely needs to work in IE9.
Thanks
jsFiddle Demo
Use jquery to bind an input event to the element like this:
$('#myInput').bind('input',function(){
//use this for the input element when input is made
var inputValue = this.value;//for example
});
As a start, this is not really the correct way to do it. But if you react on the mouseout event of a input you will most likely get it to behave the way you want.
$('#input').mouseout(function(){
if($('#input').is(":focus"))
console.log("Right-click");
});
Though it is to note that this might not work as well on textareas since they tend to be larger and the mouse might not be outside of it when the contextmenu has been clicked.
Note: Other than #Travis J that react to all interaction, this will (probably) only trigger an event on rightclick (and regular mouseout).
I am writing a jQuery script that needs to work with an existing unchangeable plugin. This plugin listens for text being typed into an <input type='text'> and then processes the result. I can't alter this. My script is setting the text of the input via $('#display).val(newValue); as a jQueryUI Slider is dragged. I need the plugin to recognize this value as being typed by the user so that it processes the newValue as the slider is dragged.
Can anyone point me in the write direction for this?
You probably need to 'trigger' the keyup (or keypressed?) event so that the event handler is fired.
Here is one (slightly dirty) way to do it:
var e = jQuery.Event("keyup");
e.which = 50; // # Some key code value
$("#display").trigger(e);
Note that the plugin may be looking for particular keys, and I may have guessed the event wrong.
The more sophisticated way to do it would be to track down the plugin's event handler, and then invoke it directly. FireBug may help you find it by step-through debugging. Otherwise, you can use jquery to start inspecting the input's event handlers.
var events = $('#display').data("events");
jQuery.each(events, function(key, handlerObj) {
console.log(handlerObj); // alert(handlerObj);
});
Once you've found the relevant handler, you can invoke it directly.
HTH
You have to put an Onchange listener to the text field and trigger the necessary function to listen to onchange values of the user. eg:
function func(){.....put your logic.....}
If you are looking at reading value from a text field on changing a slider, then you have to put the necessary function on the slider control.