When a user is tabbing through a form and focus gets set on a Kendo-Ui for Angular2 MaskedTextBox, the input cursor is at the end of the mask. This is very inconvenient for a user when doing data entry.
I have tried to use the onfocus event to reset the cursor, but the event does not seem to fire for this object.
<kendo-maskedtextbox
onfocus="console.log('focused'); this.setSelectionRange(0,0);"
class="form-control"
name="phone"
[(ngModel)]="phone.phoneNumber"
[mask]="phoneMask"
required>
</kendo-maskedtextbox>
Any suggestions are appreciated....
The most recent versions of the controls fixed my problems.
Related
I have a customEditor with a <select> in it. When I turn on movableColumns, and the user clicks the <select> and still has the MouseDown as they scroll down the list, the column want to move.
Though I havent looked in the code of Tabulator, I would be willing to bet it on the combination of events of MouseDown and MouseMovement within the element are being triggered (though when I test it with the default editor and "select" text to Copy or Paste, it doesnt trigger it, but that might have something to do with focus() as well)
If I'm careful to click on the <select>, release the button, and then move the pointer to the option, the column doesn't attempt to move. Even if after the initial MouseUp, I can then MouseDown and move the pointer all I like, the column wont want to move. So again, I think it has something to do with the <select> then taking focus() and the MouseEvents not being propogated up the tree ?
For the moment, I've disabled movableColumns to reduce user frustration, even though I've explained to them the behaviour (do users EVER listen ?!?!) until a solution is found.
Addendum : it's not just MouseClick and MouseMove. if I MouseClick and hold (perfectly) still, a timer fires off and it wants to move the Column.
You will need to use a e.stopPropagation() and a e.stopImmediatePropagation() to prevent the event bubbling out of the editor
I want to manipulate the following code so that when you click in the search box it selects all the text in the box rather than having to double click or press ctrl+A
The current code is:
<input name="sysparm_search" id="sysparm_search" placeholder="Search"
type="search" class="form-control form-control-search">
Is this possible to do with greasemonkey scripts?
The most simple way would be the following (using jQuery):
$("#sysparam_search").click(function() {
$(this).select();
});
There are some drawbacks associated with this kind of selection, though. See this topic for more details: Selecting all text in HTML text input when clicked
I got a few Input components on page and while I set focus on one of them by mouse keyboard layout doesn't change, but if I do it by TAB-batton on keybord then keyboard layout changes on US. Using GlassFish server by the way. Why it happens and how to fix it?
This is the OS X feature to input text in <input type="password" /> only in English
I have a long form, and the client have to scroll vertically the screen to see all fields.
But, every time one of those components with the property update=#form is fired, the screen get back to the top position.
So, the question is:
There is a way to keep the scroll bar in the same position after an update=#form ?
Important: The scroll bar back to the top only in the first update=#form, after that, the screen keeps the current position.
I am not sure if it's a bug or I am doing something wrong that is causing that behavior.
And yes, i really have to update the whole form
e.g.
<p:commandButton id="btnVerifyLogin" update="#form" value="Verify"
actionListener="#{demandController.VerifyLogin()} />
I had this issue before, where I had to update the whole form.
What I have learned that when I update the form containing the button that has been pressed (like your Verify button), the browser somehow loses the focus on that button and just scroll back to the top.
I came up with a workaround.
<p:commandButton id="btnVerifyLogin"
update="#(form :not(#formId\\:btnVerifyLogin))"
value="Verify"
actionListener="#{demandController.VerifyLogin()} />
Basically I update the form but not the button, this way the browser keeps the scroll as it is.
Others would suggest that onstart we can call var scroll = $(window).scrollTop(); in order to preserve our scroll position, and oncomplete we call $("html").scrollTop(scroll);, but this won't work since the oncomplete won't be triggered since the button is updated inside the form!
Again this will work only with Primefaces 4, and recently I avoid updating full forms, I prefer to use selectors.
Hope this helps.
In the form I am creating, I have lots of buttons that depending on the data state, are disabled or enabled.
I have an issue where, in certain situations, my "Reset Form" button is the only enabled button left on the screen, so it accepts the "enter" keypress... and blows away all the user information.
I need to retain usage of the enter key with the other fields, but I'd like to hide this reset button from ever being seen on the page DOM as the "firstnext" button to invoke on enter keypress.
I've seen a few solutions w/ javascript, but I was hoping there was a native JSF way to do this, or even with an extension library. Taborder was of no help... Best I could come up with that works is a hidden button on the page dom in front of the reset button that dev/null's. There's gotta be some sort of cleaner solution.
Thanks in advance.
Turns out, if you declare a button as type="reset" it prevents firstnext recognition. You can still have an action="#{bean.resetFields}" method being called and it will give you the best of both worlds.