Hidden focus on blur of an input element in dom - javascript

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.

Related

Empty password input value on autocomplete (React.js)

After my login form is autocompleted by the browser, the queried password input's value is empty. After I click into the password field, the value gets magically available, also there are many events fired by the browser that don't make sense. (The onChange on password input is not among them.)
Why is the value on input[type=password] empty?
Why the autocomplete on password input doesn't fire onChange event?
( it fires on normal input )
Bonus question: Why there is the second (unnecessary) focus/blur event?
1. Both inputs set to type="text"
Both inputs get rendered once (no autocomplete)
note: My inputs are uncontrolled but stateful and I track state changes on focus, blur, change
entered=true when there is a value entered
focused=true when onFocus fired, =false when onBlur fired
peek=true when I need to programatically force type from password to text
2. Input set to type="password"
(See how the form is autocompleted.)
...
2.render (red arrow) - Browser focused the input
onChange fired on email input
3.render - Internal state changed (entered=true)
4.render - Browser unfocused the input
5.render (yellow arrow) - Browser focused the input again?
6.render - Browser unfocused the input
Browser didn't make any changes to dom element
preview password - changed input type to text programatically
manual validateForm() - password is empty, form is invalid
manual interaction also says the value is "" empty
What is interesting is that after pressing the PrtScr in the browser, the value gets available and form gets rerendered - as when focusing the input by hand.
An issue on the React GitHub discussing this: https://github.com/facebook/react/issues/1159. Spoiler: it's been active since Feb 2014 with no resolution.
Possible workaround: making a custom change handler that listens to the native browser event instead of the react synthetic one. This is complicated by the fact that we're using custom input elements from our validation library instead of native inputs which I'm sure to have their own change handlers to re-validate and we don't want to break those
Another possible workaround: save refs to all the form fields and manually grab their .value before submitting rather than relying on the managed values in the state, which is decidedly non-reactive and definitely not ideal

Protractor: How to handle blur event in input textbox?

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.

how watch to change angularjs model which checkbox changed from jquery

I use https://github.com/Dimox/jQueryFormStyler for styling form inputs.
I set the property ng-model="c.model.acept".
If I click on "styled checkbox", then input gets to property "checked", but the angular model still has the old value.
I tried to trigger the change event with no result.
If I trigger the click event, then the checkbox gets changed twice (once from click, and then the second time from the triggered click event).
How to fix it?
You can not change "ng-model" of particular input field conditionally.
In this condition what you can do is, keep two input field and use "ng-show" or "ng-if" attribute to show & hide input field conditionally.
Hope this will hep you.

Knockout - doubling value in a focused textbox

I have a knockout model with observable arrays bound to a table. I want to have a button that when clicked, doubles the focused textbox value. I want to do this without having a create a 'hasFocus' observable for every textbox or every ko observable. Couple of issues I experienced :-
if the button just edits the value of the textbox directly using jQuery, the ko value does not get updated. I need a way to tell the button to change the underlying value
if I focus on a textbox then click a button, the focus on the textbox is lost so client side also doesn't remember what textbox is focused
Do an event binding on input on both focus and blur, setting and clearing an observable which tracks what input is active.
When the button is clicked you know which value to double

dojo Select box, triggering events on select

Hi I am using a dojo select, I have a text box where a certain ID is entered and then based on what is chosen on the select box an action is performed. Now the problem is, suppose over two different requests the action remains the same and the id changes I cant trigger the function with the onChange event. How do i handle this? Even if the user opens the select box and chooses the same item as last time I want the function i've written to be called.
onchange fires when any option is changed of the combo box.In your case you are not changing the options so obviously that event will not fired.
You can try onclick instead.
Write the same code in onclick for the select element (however with some intelligent logic since onclick will keep on firing even before you are able to select any option which may not expected in your case..!).

Categories