Can backend data overwrite maxLength for inputField - javascript

I am new to React and whole understanding of Front end development. So excuse me if its a silly question.
I have this below html input and its maxLength is specified as 24. So it will only allow user to enter upto 24 characters. If user tries tying anything more, it wont allow and only 24 characters are seen.
<input type="text" maxlength="24" id="sessionNo" name="sessionNum" onkeypress="return isNumberKey(event)" />
Uptil now is ok. But the earlier code had maxLength="32". So users had saved upto 32 characters and that data is stored in Db. When this default value is picked and shown in input field, what will i be seeing ? Will i see truncated 24 characters only or will i see 32 characters initially and as user edits the field, it will truncate additional characters and only 24 characters will be shown. "
Any suggestions highly appreciated

It might depend on the browser, but my local test with chrome says the following: values longer than the max are shown if set programmatically (setting the value of the element), but it is not possible to add characters to the input field. They can only be removed.
This might be different for other browsers.
Thanks to #thespeciamone for the example
<input style = "width: 500px" maxlength = "24" value = "More Than Twenty Four Characters Boi. Also users can inspect element and delete the maxlength setting and now there is no limit.">

Related

HTML input element password pattern with alphabet and number range

I know this may be very simple but I couldn't find anything relevant. I am using the HTML element for accepting the password from the user.
There is a condition for the password to be accepted
It should only contain letters between a to h (0 times or more)
It should only contain numbers between 1 to 8 (0 times or more)
Following the above two conditions the user can come up with any password combination. For example: abc123, 6ad27, hefb etc etc which should be accepted by the input element.
But it should not accept patterns like z00911, ksoql234 etc.
What should be the value for pattern attribute in the following code snippet for checking the above two conditions?
<input type="password" pattern="WHAT-SHOULD-I-PUT-HERE">
I hope someone might help. Thank you
<form action="/blablabla">
<input type="password" pattern="[a-h1-8]+" required="required" title="Wrong password">
<input type="submit">
</form>
In regular expression [a-h] means range of character, you can define multiple ranges in square brackets: [a-h1-8]. If you want to allow repetitions of pattern you add *(0 or more repetitions) or +(1 or more repetition) after pattern. Your pattern for single letter is [a-h1-8] so for password containing at least on character full pattern is [a-h1-8]+. You can read more here.
I have also added required attribute to enforce filling password field, without that attribute user could simply leave password blank.
You can handle this problem easily with javascript functions such as onChange event on your input tag.
Every onChange event you can check the last added character or letter whether meets your conditions.

innerHTML stripping dynamically added characters

I'm building a form that displays a preview and I'm having issues with innerHTML stripping dynamic content from a text input field.
The dynamic content is coming from the Inputmask-multi Jquery plugin, which forces phone number formatting. See an example here: http://andr-04.github.io/inputmask-multi/en.html
Firefox and Chrome are stripping the proper formatting and just display the numbers entered by the user.
Form input code:
<label for="wphone_input" id="wphone">Work Phone:<span style="color: #ff0000">*</span><br>
<input type="text" name="wphone_input" id="wphone_input">
</label>
I'm grabbing the value of the input like this:
wphone = frm.wphone_input.value;
Then I'm setting the display like this:
document.getElementById("wphone2").innerHTML = wphone;
Can someone tell me how I might display the input value with proper formatting included?
I am on Chrome. I went to the URL you listed, typed a bunch of 5s in the box, and opened a console window (Note, the input is highlighted so $0 is the input box):
$($0).val(); // 55555555555
$($0).data().inputmask.autoUnmask = false;
$($0).val(); // +555-55-55-5555;
So there is probably an autoUnmask option you set when initializing the input mask.

Is there a way to open the 'alphanumeric' keyboard with numbers by default?

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.

AngularJS input[number] truncates large numbers

I'm trying to write back to an input field of type Number
<input type="number" id="viewer" value="{{ccNumber}}" />
When binding to the model my number.. which is 19 digits gets truncated and rounded by angular. This isn't acceptable, type must be number to work with mobile.
http://jsfiddle.net/1fgfmk0h/4/
The link above is the scenario. Basically I put a 19 digit number in but when it comes back the number is rounded off. If anyone knows how to fix this issue I'd greatly appreciate it.

Does textarea have default maxlength for Firefox?

I am trying to set the .value of my text area to a certain string that is very long. It works fine on other browsers, but on Firefox, the whole string does not show up in the textarea. I am aware that there is a maxlength attribute. I did not set this. If it is not set, is there a default value or is it unlimited?
No. From Mozilla: (link)
maxlength:
The maximum number of characters (Unicode code points) that the user can enter. If it is not specified, the user can enter an unlimited number of characters.

Categories

Resources