I have seen following 4 ways to use keyup event within HTML?
<input type="text" onkeyup="myFunction()">
<input #inputstring (keyup)="doSomething(inputstring.value)"/>
<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>
<input type="text" #formReplay (keyup)="0" />
I want to understand what is difference between the above three statements.
I have seen in angular a reference variable is created starting with #.
I have seen bottom two approaches being used in angular.
<input #inputstring (keyup)="doSomething(inputstring.value)"/>
<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>
And, I have seen onkeyup used in plain javascript
I need some understanding on what are the various ways to use keyup in angular and in pure JS.
Which one is a preferred way to use keyup?
Related
So I'm trying to make a form for my assignment, and I am using the pattern attribute in html so only certain characters are required to be typed on the text box. But for some reason, the form is saying using that I'm using an incorrect format even though I made my pattern attribute that way.
Here's an example of the code and a picture of the problem.
<form>
<label for="mnumber">Mobile Number:</label>
<input type="text" required id="mnumber" pattern="[0-9]"><br><br>
<input type="submit" value="submit">
</form>
You did write:
pattern="[0-9]"
You are asking for only one number. You just forget to add '+' to accept more than one number. I guess what you are searching for is this:
pattern="[0-9]+"
pattern="[0-9]"
allows for only a single number character to validate (and be submitted). If you want to allow more than one character, here's your options:
One or more numbers:
pattern="[0-9]+"
Zero or more numbers:
pattern="[0-9]*"
One to three numbers:
pattern="[0-9]{1,3}"
you just need to change type="text" to type="number"
I have: <input type="text" id="help-text" [(ngModel)]="fileName" disabled>, and I'm curious to find how can I trigger an event if 'fileName' changed in Angular. (change)="onChange()" does not seem to be working and a couple of pre-defined jquery scripts.
Remove disabled attribute and use ngModelChange
<input type="text" id="help-text" [(ngModel)]="fileName" (ngModelChange)="modelChanged($event)">
I've created a functionality for user(s) to be able to upload multiple images to a website with different html input tags like so:
<input type="file" name="photos[]" required>
<input type="file" name="photos[]">
<input type="file" name="photos[]">
<input type="file" name="photos[]">
<input type="file" name="photos[]">
The idea is to allow only a maximum of 5 images to be uploaded. I know I can just do <input type="file" name="photos[]" multiple> but this doesn't allow them to choose files from different folders from their device, hence the reason why I have multiple <input type="file">.
I know this pattern works well with radios and checkboxes, but the issue I'm having now is to validate the field as one and not multiple inputs.
I know there are javascript/jquery libraries I can use to achieve this, but I really do not want to use any.
Is there a workaround towards achieving this?
CodePen: http://codepen.io/leongaban/pen/hbHsk
I've found multiple answers to this question on stack here and here
However they all suggest the same fix, using type="number" or type="tel"
None of these are working in my codepen or project :(
Do you see what I'm missing?
Firstly, what browsers are you using? Not all browsers support the HTML5 input types, so if you need to support users who might use old browsers then you can't rely on the HTML5 input types working for all users.
Secondly the HTML5 input validation types aren't intended to do anything to stop you entering invalid values; they merely do validation on the input once it's entered. You as the developer are supposed to handle this by using CSS or JS to determine whether the field input is invalid, and flag it to the user as appropriate.
If you actually want to prevent non-digit characters from ever getting into the field, then the answer is yes, you need to use Javascript (best option is to trap it in a keyUp event).
You should also be careful to ensure that any validation you do on the client is also replicated on the server, as any client-side validation (whether via the HTML5 input fields or via your own custom javascript) can be bypassed by a malicious user.
It doesn't stop you from typing, but it does invalidate the input. You can see that if you add the following style:
input:invalid {
border:1px solid red;
}
I use a dirty bit of JS inline, it's triggered upon paste/keying (input).
Within your input tag add the following:
oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"
All it's doing is replacing any character not 0-9 with nothing.
I've written a tiny demo which you can try below:
Numbers only: <input oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"></input>
Firstly, in your Codepen, your inputs are not fully formatted correctly in a form.... Try adding the <form></form> tags like this:
<form>
<lable>input 1 </lable>
<input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' />
<br/>
<lable>input 2 </lable>
<input type="number" pattern='[0-9]{10}'/>
<br/>
<lable>input 3 </lable>
<input type= "text" name="name" pattern="[0-9]" title="Title"/>
</form>
Just add a check to the onkeypress event to make sure that the no alphanumeric characters can be added
<input
type="text"
placeholder="Age"
autocomplete="off"
onkeypress="return event.charCode >= 48 && event.charCode <= 57"
maxlength="10"
/>
I have a HTML page.
I want to have a input box, that has a default value, that people can select, but not write over. It if for a share link to the page.
How can I do this?
EDIT: Using readonly="readonly" works and satisfies the solution, but the mouse pointer becomes a stop sign. I have chosen to use pure text instead of putting the share link into an input box. A javascript/Jquery solution will be possible but I don't use scripts on my website.
give input box readonly property like
<input type="text" id="a" value="abc" readonly="readonly" />
you can use it as
<input type="text" id="a" value="abc" disabled="true"/>
you can also dynamically change this attribute using javascript as per your requirement.
add
readonly="readonly"..........
please notice :
readonly - is a markup class
we dont have to write x=x
so we can only write x
hence
<input type="text" id="a" value="abc" readonly />
also work
Method 1
input type="text" id="a" value="abc" disabled="true"
Method 2
input type="text" id="a" value="abc" readonly="readonly"
In first case, text field will be disabled and you will not be allowed to select the value, where as in the second method you can select it, but not able to edit it..
Disabled field are not accessible in successor pages.
You can also dynamically change this attribute using javascript as per your requirement.