how to line break on placholder of text area [duplicate] - javascript

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

Related

To prevent only spaces in textarea

How do I prevent only spaces in the text area? I don't want to allow only white spaces in the text area using HTML pattern or Validator.pattern.
You can use this regex for no spaces:
<form>
<input type="text" pattern="[^' ']+" />
</form>

Html input type="number" returns empty string as value [duplicate]

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" />

highlight text inside a div or span using typescript and jquery [duplicate]

This question already has answers here:
Selecting text in an element (akin to highlighting with your mouse)
(16 answers)
Closed 6 years ago.
I am trying to highlight the text inside a div / span automatically when the page loads.
I am able to highlight text in a read-only textbox but, the text inside a div / span, is not working.
I am using typescript in my application.
Fiddler: http://jsfiddle.net/5zWad/75/
HTML:
<input type="text" readonly="readonly" value="ABC" />
<div>
<span>
this is a span
</span>
</div>
<div>
this is a div
</div>
JS
Inside a typescript method,
//WORKING
$('input').select();
//NOT WORKING
$('span').select();
//NOT WORKING
$('div').select();
I looking for a suggestion that works with typescript.
Any suggestion / direction will be greatly appreciated. Thanks.
Edit:
I tried the suggestion provided by "Get Off My Lawn" but, typescript is not recognizing the createTextRange() and showing error.
The .select() event is limited to <input type="text"> fields and <textarea> boxes.

white space regex in javascript

I have written a HTML 5 file. In form I have one required text field. I want to validate this text field in such way that user can start the value in it with a space. But he is not allowed to enter only a space character. Means, he can start typing with a space but must not enter only a space character in text field. To work around this, I gave a pattern attribute through javascript's setAttribute method.
<form method="post" action="" id="validation">
Name:<input type="text" id="nome" name="nome" required="required" oninvalid="this.setCustomValidity('Name is required field')" oninput="setCustomValidity('')" /><br />
<br><br>
<input type="submit" value="Enviar" />
</form>
<script>
document.getElementById('nome').setAttribute("pattern",".*\S+.*");
</script>
output: when I gave only space. It works. But when I start typing with a space and then some characters, then It again validates: "Name is required field.", whereas now it should mark it correct.
one more thing, I want to add the pattern attribute through javascript only.
How can I resolve this problem in such a way that when user can start typing with a space but should not be allowed to enter only a space.
The minimal pattern you need is
^ *[^ ]+.*$
If you want to ask for exact non-space characters in the middle (for example, 5 or more) of a string then use
^ *[^ ]{5,}.*$
Notice that the above patterns are indifferent to spaces in the end of matching strings, and if you want to forbid trailing spaces then remove the .* part.
Also if nessesary you may change the space character to \s everywnere in these examples to catch also tabs, carriage return, form feed etc. characters.
It seems you simply want to prevent the user from entering only space characters. You could try simply trimming an instance of the input. It would be more reliable than using a RegEx for this scenario.
If the trimmed instance comes to have null length, then the user entered only space characters. Then you can return an "invalid" error.
Here is an example of the logic:
if(string.trim().length === 0) {
return false;
}
Here is a fiddle: http://jsfiddle.net/esvsLx8u/

how to break the line in value of input field [duplicate]

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.

Categories

Resources