I have an input with type=number which I want to have the entire number selected upon the user touching the input. How would I go about doing this?
I'm getting errors that type=number doesn't support selection - I'm finding this difficult to get around. If anyone can handle this in terms of an Angularjs directive, that would be ideal.
Thanks,
Try using input type="tel". It may have been fixed I've never gone back to explore but at one point in time Angular and type="number" did not combine well at all.
It has to do with the way the browser handles its own processes and a collision with Angular doing the same.
Related
EDIT: this feat is impossible. since then I have given up. I shall not delete this question, but rather leave it up right here so future users can see a relevant result to their query on google regarding a similar thing
Goal: Either make a textarea bring up the virtual keyboard when focused(with js) OR make a input[type=text] have multiple lines AND bring the virtual keyboard
(I believe answered here but with unsatisfactory results.) (If anyone knows of fully compatible ways to multiple-line-ify an input[type=text] please tell me)
Expected results: virtual keyboard popup when focusing the input OR textarea fields (via javascript with no user trigger).
Real results: caret appears in text field but keyboard remains unseen.
Here's what I'm trying on a textarea:
document.elementFromPoint(document.querySelector("textarea").getBoundingClientRect().x, document.querySelector("textarea").getBoundingClientRect().y).dispatchEvent(click);
Please don't make irrelevant comments about my code organization
#WaisKamal can you show me your code since you said it works?
HTML(no CSS):
<textarea>textarea</textarea>
<input type="text" value="input" />
<script>
//document.elementFromPoint(document.querySelector("textarea").getBoundingClientRect().x, document.querySelector("textarea").getBoundingClientRect().y).dispatchEvent("click");
document.querySelector("input").focus();
document.querySelector("input").click();
</script>
You can use inputmode to determine how a virtual keyboard behaves
<textarea>textarea</textarea>
<input type="text" value="input" inputmode='text'/>
<script>
//document.elementFromPoint(document.querySelector("textarea").getBoundingClientRect().x, document.querySelector("textarea").getBoundingClientRect().y).dispatchEvent("click");
document.querySelector("input").focus();
document.querySelector("input").click();
</script>
Edit
I'm still testing this out, it seem to give some mixed results in the jsfiddle that I'm currently testing right now, sometimes it works and sometimes it does not
*Edit 2 *
It seems to have the same results without specifying the inputmode It does not work the first time the page loads but if I click somewhere on the page, it works every time I click run.
I'm only speculating here but it seems like the keyboard does not pop up without the page receiving some user interaction first, maybe this is intentional for security reasons but I didn't find any docs saying so.
As for you other question you can give a div or other container element contenteditable to have multiple rows / any dimensions you want.
-
Here is another questions and some answers to the same problem though a bit old, Show virtual keyboard on mobile phones in javascript
-
All in all it does not seem possible so show a virtual keyboard without some user interaction.
Fighting a little bit of a battle here. I have an HTML5 SPA app based on John Papa's methodology. I have a series of input boxes that are supposed to accept positive/negative real numbers.
Similar to here, when a user types the first '-' key as part of a negative number, either breeze (1.5.2) or angularjs (1.3.15) wipes it out because it's not a valid number at that point. Per the post, I added to the input the ng-model-options:
<input
ng-model-options="{ updateOn: 'blur' }"
ng-model="rdg.Reading.ManualValue"
step="any" type="number"/>
and that helps, but the problem is that there are usability issues, as was mentioned in that post. Previously, the moment pressed the first key, the view gets notification that something has changed and all is well. Now you actually have to leave the control, which could lead to confusion.
There was a second suggestion, namely adding:
ng-model-options="{allowInvalid: true}"
Which sounded conceptually way better, but this did not have any effect - hence back to the onBlur.
I could really use some advice on how to make this better. OnBlur helped, but I can just hear the complaints I'm going to get because of this non-consistent way of entering numbers.
Thanks for any help.
Corey.
The input is getting reset when breeze parses and updates the entity. To prevent this from happening, you can add breeze's z-float angular directive to the input.
Add the script to the page:
<script src="https://rawgithub.com/Breeze/breeze.js.labs/master/breeze.directives.js" ></script>
Add the module as a dependency to your app:
angular.module('yourApp', ['breeze.directives']);
And add the z-float directive to your input:
<input data-ng-model="vm.person.balance" z-float placeholder="Balance" />
See http://www.getbreezenow.com/breeze-labs/breezedirectivesfloat
The cause is Angular's eager data binding. Angular sends each keystroke through to the data bound model property.
That becomes a problem when Breeze parses data entry before the user has finished typing. The user could be in the middle of data entry when Breeze parsing does something to her intermediate value and updates the property with something else before she has a chance to complete her thought.
For more details, and to see it in action, check out their Plunker
The text input field appears to support the Ctrl+Z (undo) fully.
The number and date input field only supports it, if the value has been typed into the field in question. If, however, it was selected by means of the associated helper control (i.e. the range control for the number fields and the calendar control for the date fields), then Ctrl+Z does not work.
Can anyone advice how to make the number and date fields support Ctrl+Z no matter how the value is entered by the user?
Thanks.
P.S.
I am currently using jquery and chrome.
EDIT1
I am using <input type='number' ... and <input type='date' ... It is entirely possible that I should use something else (what?)
EDIT2
I am talking about interactive actions only, not script based changes.
Undo is a weak spot in HTML5 applications. There is no simple solution because undo is ultimately application dependent (just like in desktop apps).
See this question for some solutions: Implementing undo in a web app
Essentially the length of the HTML Select drop down is exceeding the screen on notebooks, I've checked and different browsers allow different amounts of options to be displayed before it turns it into a scrollbox. Is there any way of putting in a browser css hack or javascript action to stop it at 3 options? Failing that is there any way to limit the height of the drop down for the same effect?
I've googled up on this but with no such luck, no one seems to have had a problem with notebooks before. I know it's possible as on the Lloyds TSB personal login screen there is a select element which limits to about 3/4 options. As I say I don't mind using JS or even browser specific solutions as I've developed a notebook friendly way of doing it which is less intuitive and clunky looking but can be used as a default.
Any help would be greatly appreciated.
Rupert S.
Sadly, you can't change the item's that the dropdownlist displays, it is decided by the browser, with the size option it will loose its 'dropdownlist' form, and turn more into a list.
You could try finding some Jquery dropdown list, they are usually editable to whatever you want.
Morning folks.
Novice Rich here once again requesting assistance.
I have just started dabbling with javascript and although I have set up a few onclick/change for setting the focus of radio buttons,that's pretty much my limit.
In my c# code behind, I would like to have an 'onchange' function whereby once a client starts to type in my autocomplete textbox, a drop down list (which is likely to have been populated previously) is reset/cleared to it's original state.
Anyone got any ideas how to do this?
(Chances are I haven't exp[lained myself very well here)
What you want here is to start exploring jQuery. When you find yourself familiar with it, create a server-side ASP.NET Handler that returns JSON data to your jQuery.getJSON call and from that, populate your autocomplete textbox.
Or, you can of course not reinvent the wheel and just use one of the plethora of jQuery Auto-Complete plug-ins available out there. Whether you'd still need the server-side handler to provide the auto-complete plugin with data depends on your use-case, but in most cases you'd get much better performance out of pre-populating the data when the page loads.