In the Angular app there are multiple views that have various inputs. When the user goes into a view, he needs to click the input field to type in the value. On a mobile device it is expected behaviour since the user would have to open keyboard widget to type in, so it is good he needs to click the field to type data in. But on a computer there is no need for a keyboard widget to open. User can type straight away. My question is: how to make a input field "default", so that when the user starts typing on a computer (or any other device with keyboard) the "default" input field will focus and fetch the incoming typed in string? Something like:
<input defaultInputOfAView="true"></input>
You can use autofocus to achieve it.
<input defaultInputOfAView="true" autofocus></input>
There is also a very nice solution (besides autofocus that triggers only once):
<div>
<input #myInputRef>
{{myInputRef.focus()}}
</div>
Related
I have a html input element on my page in which the user can enter his e-mail address:
<input type="email" id="yourEmail" name="yourEmail">
I do not send this field via the form directly but read it into a variable with javascript like this:
let email = document.getElementById('yourEmail').value.trim();
Now that works fine for normal e-mails, but as soon as I have special chars like German Umlauts, I get the transcribed email in the javascript variable. If I enter mail#gründlicher.de for example, the js variable contains the value mail#xn--grndlicher-beb.de. Since I want to show this data on a summary page back to the user before I sent it, that is really confusing to the user - it feels like something is broke (at least if you are not a techn nerd, understanding what happens).
Now I'm wondering: How do I get the text, that was actually entered by the user instead of the transcribed email? Obviously I could change form type="email" to type="text", but then I will also loose the e-mail specific keyboard on mobile devices, which I would like to have.
Try using type="text" to get the special characters to display, then use inputmode="email" to allow for e-mail-specific keyboard on mobile devices:
document.getElementById('yourEmail').addEventListener('change', function() {
console.log(this.value);
});
<input type="text" inputmode="email" id="yourEmail" name="yourEmail">
I'm developing a settings component which should have input fields, that are filled with the current settings on the page load via Firebase.
They are essentially filled like this:
<input type="text" #name="ngModel" name="name" value="{{ data.name }} ngModel">
After clicking on a Save Button, either only the changed data or all the data should be written to the database.
Easy right?
Unfortunately when using the ngForm directive, formData.name.value returns an empty string, if the form remains untouched. Only after changing the input fields, the value is recognized.
How can I surpass this issue without a huge hassle?
As far as I know there isn't event an option to check if a single input field was tampered with. Only the whole form can be dirty or not.
I'm devlopping a web app using Phonegap and HTML5.
When focusing on a text input, I've been asked to open the 'alpha-numeric' keyboard with the 'numeric' keys displayed.
Is that even possible?
Telephone: <input type="tel" name="usrtel">
This opens up a alphanummeric keyboard. This could be any number you want, not only a telephone number :-)
The type "tel" is new and comes from html5. A overview about all input types can be find here: W3Schools
Edit from Mon. 1st of Sept. 2014, 4:30pm:
I'm editing my answer because of the answer Jonas Grumann has given. You should use the <input type="tel" just for numbers only. Like the type described: telephonenumbers for example. This input type will not recognize it, if the user enters decimal numbers.
If you want the user to enter decimalnumbers you have to do it with the here given answer "pattern" you should use them then like this:
HTML
<input type="text">
and JS (Please consider: These are commands for which you need jQuery/jQuery-mobile
$('input[type="text"]').on('touchstart', function() {
$(this).attr('type', 'number');
});
$('input[type="text"]').on('keydown blur', function() {
$(this).attr('type', 'text');
});
And for the sake of completeness i'm going to quote the user that has given this answer here -> Force iOS numeric keyboard with custom currency pattern
The idea is simple. The input starts off and ends up with type="text",
but it briefly becomes type="number" on the touchstart event. This
causes the correct iOS keyboard to appear. As soon as the user begins
to enter any input or leave the field, the input becomes type="text"
once again, thus circumventing the validation.
There's one downside to this method. When the user returns to an input
that has already been filled out, the input will be lost (if it
doesn't validate). This means the user won't be able to go back and
edit previous fields. In my case, this isn't all that bad because the
user may want to use the calculator over and over again with different
values, so automatically deleting the input will save them a few
steps. However, this may not be ideal in all cases.
It looks like Mobile Safari supports the new HTML5 input type
attributes of email, number, search, tel, and url. These will switch
the keyboard that is displayed. See the type attribute.
If there are more questions, let me know and i'm going to edit again.
I am developing Phonegap application and have many inputs in application form. I am getting Go button on keyboard of android.I want to replace go button with next button. As clicking on Go button (as shown in image) submits form.
In android native we can specify next button in XML but for Phonegap how to specify next button in place of go button.?
Some Samsung devices have by default Next Prev button on top.
By Default there is Go button. I need Next but in Phonegap. is there any plugin for specifying that for android.
Having a "Next" button instead of "Go" is not possible with Android as of now.
Android will always display "Go" button for form input fields. "Go" is basically reflecting the same behavior as of an "Enter" button on a normal browser & keyboard. You can achieve through below code:
if (event.keyCode == 13) {
//Handling "Go" Button to move to next input field
}
OR
If your input fields are more, then data-dependency will be best solution.
If you want to prevent users from submitting the form, you can put required validations on the form using javascript, where you can specify data-dependency inside input field with required, which helps move cursor to a particular field which you specified in data-dependency.
<input type="text" id="first" data-dependency="second" />
<input type="text" id="second" data-dependency="third" />
<input type="text" id="third" />
It move focus to next fields in form until its your last field. Once last field reaches you can allow it to act as enter. So basically Go will keep moving focus to next fields until its your last field & then will submit the form.
Its been said that if have input fields without or outside the form tag means you will get next button as tab button
As far as i know there is no proper solution to get next button instead of go . There are only workarounds do it. Most common one is to capture the 'Go' button as enter key(keycode '13') in javascript and do your thing.
$('selector').on("keydown",function(event){
if (event.keyCode == 9) {
//you got tab i.e "NEXT" Btn
}
if (event.keyCode == 13) {
//you got enter i.e "GO" Btn
}
});
for tab button instead of enter
There has been also sources that already discusses these GO Vs NEXT button
have you tried the attribute enterkeyhint
The enterKeyHint property is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards. It reflects the enterkeyhint HTML global attribute and is an enumerated property, only accepting the following values as a DOMString:
'enter' typically indicating inserting a new line.
'done' typically meaning there is nothing more to input and the input method editor (IME) will be closed.
'go' typically meaning to take the user to the target of the text they typed.
'next' typically taking the user to the next field that will accept text.
'previous' typically taking the user to the previous field that will accept text.
'search' typically taking the user to the results of searching for the text they have typed.
'send' typically delivering the text to its target.
If no enterKeyHint value has been specified or if it was set to a different value than the allowed ones, it will return an empty string.
The enterKeyHint property is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards. It reflects the enterKeyHint HTML global attribute and is an enumerated property, only accepting the following values as a DOMString:
<main>
<h2>Using the <code>enterkeyhint</code> Attribute</h2>
<p>View this demo on a mobile device. Note the text in the "enter" key on your mobile device's virtual keyboard.</p>
<input type="text" enterkeyhint="Next">
</main>
You can simply use the following logic to let users focus on the next input field. This is a better approach, which I used in my one of the PhoneGap applications, as currently there are no 3rd party plugins which offer such functionality.
x$('#input1').on('keyup', function(e) {
var mEvent = e || window.event;
var mPressed = mEvent.keyCode || mEvent.which;
if (mPressed == 13) {
// On enter, go to next input field
document.getElementById('input2').focus();
}
return true;
});
For whom this may be of use:
I'm working on a react pwa and I was having issues getting the next button to show so users could move from one input element to the next (within the same screen). It turns out that android requires a <form> to be wrapping the input text elements. I did a series of tests:
input texts inside a (no tabindex, no attributes other than type, nothing)
input texts outside a (same as above)
input texts inside a inside a
input texts inside a outside a
Only those inputs inside a get android's default next-next-next-go behaviour where go = last input in the form.
Have you tried using the tabindex parameter on your input fields?
The default action of the keyboard should be to show next if tabindex is detected.
Example:
<input name="first" tabindex="1" /> //should show next
<input name="second" tabindex="2" /> //should show next
<input name="third" tabindex="3" /> //should show go
EditText android:imeOptions= "actionNext"
I'm using MVC 3 with Razor and using unobtrusive client validation. Things are working great, but I want to be able to reset the form if a user decides he wants to start over or cancel his action. It seems that there is a lot of meta data attached to each form element when using the validation.
<input type="text" value="" name="User.FirstName" id="User_FirstName" data-val-required="The First Name field is required." data-val-length-max="50" data-val-length="The field FirstName must be a string with a maximum length of 50." data-val="true" class="text-box single-line">
The jQuery snippet here shows my problem. When you try to manually reset the value of the text field, some other javascript is intercepting execution after I clear the value and it sets it back to what it was:
$("#btnReset").click(function () {
alert($("#User_FirstName").val());
$("#User_FirstName").val("");
alert($("#User_FirstName").val());
});
I'm looking for pointers here on how to clear form values when a user clicks a button. It seems like such a simple task, but I can find no documentation how to accomplish this and I haven't found anything here or elsewhere to help.
I was using an html input of type reset rather than the button type. The reset should not have been used in this case.