I am testing an app where we have written a directive which will attach blur event to input element,
Once user type some value and come out from textbox then it will check if value is not duplicate,
based on response it will set value using ctrl.$setValidity('unique', true);
When I am setting some unique to textbox using elem.sendKeys('newVal') and go to another input, it does not trigger blur event attached to the element.
Related
I am aware that the select HTML element has an onChange and onFocus event listener, but is there a way to call a function when the user clicks out of the select menu without selecting an option?
You probably can use the "on click outside" technique.
https://github.com/BosNaufal/click-outside-js
https://github.com/TooTallNate/click-outside
Instead of looking for onBlur event you detect that user clicked outside your HTML element. It should be enough to implement the logic you want.
When onFocus is called you set some flag, like selectOpen to true. Then onClickOutside event you check is the flag set for true and call any code you want.
A little Explanation : I am using List view control of kendo UI(Telerik). I am triggering an update event of that control after editing the fields in list view. The list view control is having some text-boxes, a dropdown,checkbox and a submit button. When a user change something, ideally it should trigger update but its not doing update because control is not able to judge if there is a change in model.
It is only working if I input something in textbox and just click on outside of textbox i.e just do a onblur before hitting submit. I don't know why it is happening but what I need is to just trigger a focus event but in a hidden mode so that user is unaware of it but it just happens after a user input something in textbox so that the list view control works successfully.
I am trying to do it like below but it will get noticed to user. How can i trigger focus in hidden mode after a user just enter something in textbox before hitting a submit?
function BlurFunc() {
debugger;
$(this).closest('li').find('.inputField').focus();
}
Without your code it is not clear whether you are using MVVM data binding to your model, but this may help; from http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/value:
By default the value binding relies on the change DOM event, which is
raised after blurring the element whose value has changed. This means
that the value from the View-Model is updated when the element loses
focus. The data-value-update attribute can be used to specify a
different DOM event, such as keyup or keypress. The keydown event is
not supported, because the DOM element value is not yet updated when
that event triggers.
For example, try adding data-value-update="keyup" as an attribute to your text box input element:
<input data-value-update="keyup" data-bind="value: inputValue" />
This should then update the model value upon each key press and not wait until focus has been removed.
I want to trigger an event when the input of a select2 search returns no results.
I want to trigger an event with the input value as a parameter for database search. Does anyone know how I can do this?
How can not capture the keypress event of the <input> within the select2 box?
How can I stop triggering the onChange event of a textbox in below mentioned scenario?
I have two text boxes on an aspx page;
If user change first text box value and its onChange event there is an asynchronous service call which updating the second textbox. During service call the control shifted on the second textbox. As the second text box value has been changed before it got focus, It triggers the second TextBox onChange event.
I have a select element with an onChange event that does fire when I click the select box and select a new value within it. But, when I tab to the select box and press the up or down arrows to change the select box's value, the event does not fire.
I am using jQuery().change(function(){ ... }); to set the event
When you tab into a <select> element, the change event doesn't fire until you press the Enter key.
For an onChange() to fire the value must be changed and the input must be blur()-ed (focus moved elsewhere); which is why it fires in your first case, but not in the second.
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
Reference:
change().
As others have stated, the change event doesn't happen until the blur event. You'll need to monitor keyup as well to capture someone moving changing the values with the arrow keys.
Monitor keyup and change,
$('select').bind('change keyup', function() {
// Handle
});
http://jsfiddle.net/robert/Je26w/
You can trigger the blur event on keyup on the select and then give back focus, which will trigger the change:
$('select').keyup(function(){
$(this).blur().focus();
});
example: http://jsfiddle.net/niklasvh/XEg36/