This question already has answers here:
<input type="number"/> is not showing a number keypad on iOS
(6 answers)
Closed 8 months ago.
When I set my input field type="time" or type="date" on my webapp, if I view the app in mobile device, I get nice UI such as the following when clicked on it
.
However, when I set type="number", I was expecting a number pad to pop up. However, I get a keyboard instead. If I set it to type="tel", would it cause a problem or is there a better solution?
The Number Input is another way to offer numbers for your users. The difference between the number input and the tel input is that also offers easy access to special characters and symbols. However, if you only need numbers entered, it’s best to stick with the tel input.
<label class="item item-input">
<span class="input-label">Number</span>
<input type="number">
</label>
The Tel Input is a very unknown and underused input type. It displays a full numeric keypad, which makes for a great user experience when all that is required from the user is numbers. Take advantage of this one!
<label class="item item-input">
<span class="input-label">Telephone</span>
<input type="tel">
</label>
For more information, read this article: http://ionicframework.com/html5-input-types/#number
Try something like this:
<input type="number" min="0" inputmode="numeric" pattern="[0-9]*" />
if you want to input a number then input type="number" is there. But if u dont want to see mobile keypad then u can make your own keypad like this:
<html>
<head><title></title></head>
<body>
<script> function $(id) { return document.getElementById(id); } </script>
<input id="num" type="text" readonly="true"/>
<input type="button" value="..." onclick="$('keypad').style.display='inline-block';"/>
<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="$('num').value+=7;"/>
<input type="button" value="8" onclick="$('num').value+=8;"/>
<input type="button" value="9" onclick="$('num').value+=9;"/><br/>
<input type="button" value="4" onclick="$('num').value+=4;"/>
<input type="button" value="5" onclick="$('num').value+=5;"/>
<input type="button" value="6" onclick="$('num').value+=6;"/><br/>
<input type="button" value="1" onclick="$('num').value+=1;"/>
<input type="button" value="2" onclick="$('num').value+=2;"/>
<input type="button" value="3" onclick="$('num').value+=3;"/><br/>
<input type="button" value="X" onclick="$('keypad').style.display='none'"/>
<input type="button" value="0" onclick="$('num').value+=0;"/>
<input type="button" value="←" onclick="$('num').value=$('num').value.substr(0,$('num').value.length-1);"/>
</div>
</body>
</html>
Related
I hope you are good!
I built this piece of code, which results in the following design of a checklist, in which I am able to select multiple items from a list -
<!DOCTYPE html>
<html>
<body>
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type="checkbox" id="item1" name="item1" value="Tshirt">
<label for="item1"> Tshirt</label><br>
<input type="checkbox" id="item2" name="item2" value="Jeans">
<label for="item2"> Jeans</label><br>
<input type="checkbox" id="item3" name="item3" value="Shirt">
<label for="item3"> Shirt</label><br>
<input type="checkbox" id="item4" name="item4" value="Trousers">
<label for="item4"> Trousers</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
The checklist I get :
And when I choose some items and click submit [for this time I chose Jeans & Trousers], I get my response in this format : item2=Jeans&item4=Trousers. Unfortunately, I cannot further work with this kind of response format...
The format I need should be more like : Jeans , Trousers. No item-ids, and no = signs - just their display names... Is it possible to get a response like that?
Any help would be appreciated! Thanks a lot! 🙂
Edit : Here's the code I took inspiration from - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_checkbox
You can get an array of values in your backed using name format like myarrayName[]. The name attribute doesn't have to be unique. For example:
<form action="" method="post">
<input type="checkbox" id="item1" name="item[]" value="Tshirt">
<label for="item1"> Tshirt</label><br>
<input type="checkbox" id="item2" name="item[]" value="Jeans">
<label for="item2"> Jeans</label><br>
<input type="checkbox" id="item3" name="item[]" value="Shirt">
<label for="item3"> Shirt</label><br>
<input type="checkbox" id="item4" name="item[]" value="Trousers">
<label for="item4"> Trousers</label><br><br>
<input type="submit" value="Submit">
</form>
It's a beginner project for me to learn HTML and JavaScript. Every other buttons work fine, only a dot button. Possible problem I think is that the resultado.value does not accept a decimal character and only accept numerical numbers. The resultado variable is declared in JavaScript as
var resultado = document.getElementById('ent')
This is part code in HTML that declare other numerical button and decimal button:
<p><input type="button" id="n1" class="keys" value="1" onclick="add1()"> <input type="button" id="n2" class="keys" value="2" onclick="add2()"> <input type="button" id="n3" class="keys" value="3" onclick="add3()"> </p>
<p><input type="button" id="n4" class="keys" value="4" onclick="add4()"> <input type="button" id="n5" class="keys" value="5" onclick="add5()"> <input type="button" id="n6" class="keys" value="6" onclick="add6()"> </p>
<p><input type="button" id="n7" class="keys" value="7" onclick="add7()"> <input type="button" id="n8" class="keys" value="8" onclick="add8()"> <input type="button" id="n9" class="keys" value="9" onclick="add9()"> </p>
For decimal button
<p><input type="button" id="pon" class="keys" value="." onclick="ponto()">
This is part code in JavaScript for the numerical button and decimal button:
function add1() {
resultado.value += `1`
}
function add2() {
resultado.value += `2`
For decimal button but won't work
function ponto(){
resultado.value += `.`
}
Any ideas how to add display button on display ? Thank you! Any suggestion to improve my question is appreciated also. First time asking. Thanks!
I am currently working on an html5 project in which there is a lot of input fields that I want to replace by textarea.
Example:
<input type="text" id="Questions" name="texte1"/>
<input type="text" id="Questions" name="texte2"/>
<input type="text" id="Questions" name="texte3"/>
There is 200 inputs that I want to change by:
<textarea id="Questions" name="texte1"></textarea>
<textarea id="Questions" name="texte2"></textarea>
<textarea id="Questions" name="texte3"></textarea>
but I can't really use the search and replace tool because the name is different for every input So I was wondering if anyone of you knows a quick way to replace all my inputs by text area without changing the names 1 by 1 on my code.
You need a criterion that tells you which inputs need to be replaced. What do they all have in common? Also note that you cannot have more than one element per page with the same value for id, so the HTML you show is invalid.
So for the example code I'm assuming that all inputs that need to be replaced have a CSS class replace-me:
document.getElementById('replace').addEventListener('click', (e) => {
const toReplace = [...document.querySelectorAll('.replace-me')]
for (const input of toReplace) {
const textarea = document.createElement('textarea')
const parent = input.parentNode
textarea.id = input.id
textarea.name = input.name
textarea.value = input.value
parent.removeChild(input)
parent.appendChild(textarea)
}
})
<div>
<input class="replace-me" type="text" value="1" id="i1" name="foo1" />
<input class="replace-me" type="text" value="2" id="i2" name="foo2" />
<input class="replace-me" type="text" value="3" id="i3" name="foo3" />
<input class="replace-me" type="text" value="4" id="i4" name="foo4" />
<input class="replace-me" type="text" value="5" id="i5" name="foo5" />
</div>
<button type="button" id="replace">Click to replace</button>
I'd like to give three choices which are represented by words but are going to POST numbers:
<form method="POST">
{% csrf_token %}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="Low" value=1 autocomplete="off"> Pale
</label>
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="Medium" value=5 autocomplete="off"> Medium
</label>
<label class="btn btn-secondary">
<input type="radio" name="intensity" id="High" value=9 autocomplete="off"> Deep
</label>
</div>
</form>
But then in my view request.POST.get('intensity') is a string. Do I need to manually convert it or there's something I'm missing?
ps. I'm not using Django forms and I don't want to use it at the moment.
No. HTTP only deals with strings and the value of the string is left for the server to decide. You can convert the value using int() function in python.
Reference:
How to get int instead string from form?
I have a button group in which I have tree inputs of type radio.
The reason I use these, is that in order to get the style template I have bought for my project working I must use the exact same elements.
The button group is controlling the size on a dynamic table, and I need an event fired when a button (input) is pressed
<div class="btn-group" data-toggle="buttons" (click)="pageSizechanged($event)" >
<label class="btn btn-success">
<input type="radio" name="options"> 10
</label>
<label class="btn btn-success">
<input type="radio" name="options"> 20
</label>
<label class="btn btn-success active">
<input type="radio" > 30
</label>
</div>
I am using Angular 2 so I have tried to bind the inputs with values (not shown) without luck...
Update
The answer marked as solved below only partially solved my problem as I could only press each input once. To solve this I did the following:
<div class="btn-group">
<label class="btn btn-success">
<input type="radio" style="display:none" value="10" (change)="pageSizechanged($event.target)" > 10
</label>
<label class="btn btn-success">
<input type="radio" style="display:none" value="20" (change)="pageSizechanged($event.target)"> 20
</label>
<label class="btn btn-success">
<input type="radio" value="30" style="display:none" (change)="pageSizechanged($event.target)"> 30
</label>
</div>
In the change event i pass the target along. I do this because i want to set checked to false:
pageSizechanged(target) {
this._pagesize = target.value;
target.checked = false;
...
}
Otherwise the inputs will remain checked and the change event will therefore not be fired. If someone have a better way to do this, please share :)
Not entirelly sure what you want to achieve, but if I understood correctly.
You can bind the radio buttons with ngModel and avoid the current click-events entirelly, and rather react to changes. The following template works, just define your tableSize variable in the component class.
<div class="btn-group">
<label class="btn btn-success">
<input type="radio" name="options" [(ngModel)]="tableSize" value="10"> 10
</label>
<label class="btn btn-success">
<input type="radio" name="options" [(ngModel)]="tableSize" value="20"> 20
</label>
<label class="btn btn-success active" >
<input type="radio" [(ngModel)]="tableSize" value="30"> 30
</label>
</div>
Current tableSize: {{tableSize}}
If you need an event, you can add a (change)="myFunc($event.target.value)" to the input tags as well.
I don't think radio inputs are currently well supported in angular2. (you seem to have to make your own component).
I have used them with a simple event handler on the (click) event, like so:
<label class="chart__controls__item" *ngFor="let choice of ['competitor','taxonomy']">
<input type="radio"
name="options"
(click)="selectedChoice = choice"
[checked]="choice === selectedChoice" >
No
</label>
<label>
<input type="radio"
name="options"
[checked]="choice === selectedChoice"
(click)="selectedChoice = choice >
Yes
</label>
So if we initialise with selectedChoice='Yes', the second radio button will be selected. The [checked] attribute makes sure the selected radio button is checked and the (click) directive triggers the model change.