This question already has answers here:
Multiple lines of input in <input type="text" />
(10 answers)
Closed 9 years ago.
I am trying to put some more data into value part of an input. but I want those strings to have line break.
<input type="text" value="text break text"/>
I want the value to be shown:
text
text
how can I do this? I am trying to add this with template engine of django, but django doesnot have it.
appreciate any help
I guess, you need to use <textarea /> instead of <input type="text" /> field. To break the lines, just use the normal line break like this:
<textarea>
Line 1
Line 2
</textarea>
You may find more about <textarea/> in HTML 4.01 specification.
Related
This question already has answers here:
Allow 2 decimal places in <input type="number">
(18 answers)
Closed 3 years ago.
I want to show a popup on submit if the value is less than the max attribute. I am able to achieve that with the HTML5 attribute like this: <input type='number' max='21' />
but the problem is that when the max value is a float number like <input type='number' max='21.1' /> then it shows another popup saying that the value must be less than 21.
I've searched and I can solve that problem with Javascript but I want to use the max attribute even when the value is a float number.
<input type='number' max='21.1' />
<button type='submit'>Submit</button>
I want the form to be able to submit even if the value is 21 or 21.1 unless it is 21.2 or more.
You need to add the step property like this:
<form>
<input type="number" max="21.1" step="0.1"/>
</form>
Alternatively you can use any as value:
<form>
<input type="number" max="21.1" step="any"/>
</form>
This question already has answers here:
Insert line break inside placeholder attribute of a textarea?
(25 answers)
Closed 4 years ago.
I am looking to line break on placeholder of textarea on reactjs
So far I have tried to use \n, <br>, nl2br, \\n and none of them worked
<Input type="textarea" name="txtarea" placeholder="Line1 \n Line2" />
The current output im getting all in the same line as Line1 \n Line2
My goal is to have them out on a separate line as
Line1
Line2
Newlines do not work in the placeholder attribute of <input> elements, but they work for the <textarea> element.
However, using <input type="textarea"> is not valid markup and will be replaced by the browser to an <input type="text">.
If you want multi-line input, use a <textarea> instead.
For the newline, use the
and
HTML entities in your placeholder, which are the line feed and the new line characters:
<input type="text" placeholder="line
line2">
<textarea placeholder="line1
line2"></textarea>
You have to put that
insted \n inside the placeholder
This question already has answers here:
Implement an input with a mask
(10 answers)
Closed 1 year ago.
I would like to make an input type mask __/__ only numbers can be inputted without using any plugin just pure jquery any tips?
Another Question: For example user would input 3,, the output display will be 3/9 the (/9) will just be there and not editable cause 9 would be the maximum number of pages is this possible to achieve?
As far as I understood, your question is how to do the following:
Mask input field
Input field can only accept number
So I do the following steps:
Make input field as password type.
Detect the key in character while typing(keypress is done before value change), then don't change the existing value when the character is not numeric.
I added a button that you can click it to show current value.
$('#in').keypress(function(event){
var reg = /[0-9]/g;
var key = String.fromCharCode(event.keyCode);
if(!reg.test(key))
return false;
})
$('#show').click(function(event){
alert($('#in').val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="in" type="password"/>
<br />
<button id="show">Show Value</button>
Update
Below is an example done by this plugin.
This may meet your requirement.
$('#inputtext').securenumbermask({mask:'_',maxlength:15});
$('#show').click(function(event){
alert($('#inputtext-original').val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Mask-Numbers-In-Text-Field-Secure-Number-Mask/js/securenumbermask.js">
</script>
<input class="form-control" type="text" id="inputtext" value="123" input-original="inputtext-original">
<input id="inputtext-original" type="hidden" value="**">
<br />
<button id="show">Show Value</button>
This question already has answers here:
How to make HTML input tag only accept numerical values?
(33 answers)
Closed 4 years ago.
When you have:
<input type="number" id="myInput" />
and you fill in quite some rubbish like:
8,5,.,.,.,54.,543,.4
Then $('#myInput').value will return ''
This means that it is treated as if nothing was filled in by the user, messing up my form validation.
How can I retrieve the actual input?
A codePen can be found here, you can check the console that it indeed prints an empty string: https://codepen.io/anon/pen/EQrrXz?editors=1111
I am on chrome, but on safari this also happens.
I still want to be able to accept normal number inputs, including decimals.
You are putting string into type='number' which is not correct.
You get this error in console when you do it.
The specified value "8,5,.,.,.,54.,543,.4" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
You can change type='text' instead or put pure number to type='number'
Example:
console.log(document.getElementById('myInput').value)
<input type="text" id="myInput" value="43.,.,,.,.5" />
This question already has answers here:
remove value attribute of input element using CSS only
(4 answers)
Closed 5 years ago.
I have a card reader which connects to computer via USB,it's supposed to print a 10 digit number when an input is focused on and a card is placed over the card reader, it works fine but I need the code to be invisible. when I hide the text using color:transparent, the text is hidden but when the user double clicks on the input it shows the text!
Thanks in advance.
Use this
<input type="password" name="pin" value="abc123">
And if you want to hide it completely then use
<input type="hidden" name="pin_hidden" value="abc123">
Please see below-
.hide {
text-indent: -99em;
}
<input type="text" value="123456789"><br>
<input class="hide" type="text" value="123456789">