Limit number of lines able to write with textarea - javascript

I want to not just limit the number of times enter can be pressed in the text area but stop the output being over two lines. To better explain, I have a photo frame designer here. In the options you can enter text and it will appear on the frame. Currently if you try to press enter in text area more than 2 times it won't let you. The problem arises when the text is too long and it automatically wraps to a new line.
Here is some relevant code.
$(document).ready(function(){
var lines = 2;
var linesUsed = $('#linesUsed');
$('#input').keydown(function(e) {
newLines = $(this).val().split("\n").length;
linesUsed.text(newLines);
if(e.keyCode == 13 && newLines >= lines) {
return false;
}
});
});
That's some jquery that limits the number of lines in the TEXTAREA.
And the textarea
<textarea id="input" maxlength="40" name="Text" value="Max. 40 characters"></textarea>
The jquery that prints the input from the text area
$('#input').keyup(function() {
$('#text').html($(this).val());
});
This is the embedded html in my svg where the typed text is printed to.
<foreignObject x="135" y="520" width="600" height="260" style="color:white;text-align:center">
<body xmlns="http://www.w3.org/1999/xhtml">
<div id="container2">
<p id="text">Your words here</p>
</div>
</body>
</foreignObject>

Automatic line wrapping in a textarea can be prevented using the attribute wrap=off, which is nonstandard but widely supported since the early days of HTML.
<textarea id="input" maxlength="40" name="Text"
placeholder="Max. 40 characters" wrap="off"></textarea>
(I have changed the value attribute to a placeholder attribute. The value attribute is not valid for textarea.)
A different, possibly better approach is to avoid the problem by using two input type=text fields instead of one textarea field. Then you would not need JavaScript for preventing the entry of more than two lines, but if a limit on the total number of characters (instead of just setting a limit on each line) is needed, you would need simple JavaScript for that.

Here are 2 javascript libraries that can help you with this:
Stop Verbosity
Limit
As you can see on the demo-sites, both these solutions just work.

Related

Append elements to text box in new line using HTML DOM

Suppose i have textbox :-
<input type="text" name="content" id="content"/>
And i am trying append text to this input box in the following manner:-
document.getElementById("content").value+= "A";
The output is something like:-
AAAA....
Each time, the text is getting appended in the same line, how can make the text to append each time to the new line? Like that of below.
A
A
A
.
.
Instead of an input type text, you can use a text area and then style it to look like a text box.
<textarea name="textarea_content" id="tx_content"></textarea>
document.getElementById("tx_content").value+= "A\n";
document.getElementById("tx_content").value+= "A\n";
JSFiddle: https://jsfiddle.net/sx7t3ykc/
The input textbox will support one single line. not multiple lines. that is it's behaviour. That's why your text is shown in a single line.
If you need multiple lines, then you need to use <textarea></textarea> element
input is used for a single line. Try using textarea.
Refer code below:
<textarea type="text" name="content" id="content">
</textarea>
and js will be like this:
document.getElementById("content").value+= "A\n";
I have made you an example that appends a new "A" char every 5 seconds. I use textarea instead of the input tag.
setInterval(appendNewChar, 5000)
function appendNewChar()
{
document.getElementById("myTextArea").value += "A\n";
}
<textarea id="myTextArea"></textarea>
As #GuyFromChennai said, you have to use tag instead of , also, writing '\n' will make the line break, I tried this:
<textarea name="content" id="content"></textarea>
for (let i=0; i<3; i++){
document.getElementById("content").value+= "A\n"";
}

how to make enter on input show up on output [duplicate]

This question already has answers here:
angularjs newline filter with no other html
(7 answers)
Closed 6 years ago.
When the user presses enter in the input box I would like that to reflect in the H1 tag.
As you can see when the user types
Line 1
they can press enter and create
line 2 in the input no problem, but the output in the h1 tag is still "Line 1 line 2" all on one line.
Please look at the fiddle as that will make a lot more sense.
I was thinking about using a keypress function to get when the user presses enter and then do something with that? I'm not sure if there is a better way though.
https://jsfiddle.net/BSmyth634/ovz8thrp/
<div ng-app>
<form>
<textarea rows="4" type="text" ng-model="todoText" size="30" placeholder="add new todo here">
</textarea>
</form>
<h1>
{{todoText || 'Hello World'}}
</h1>
</div>
You need to use style="white-space: pre;" in your code to do it.
JS Fiddle
I see two ways to achieve what you want.
Use white-space css property. In your case the pre-line value might be interesting.
Create Angular's filter and use it.
you can use pre element instead of h1
<pre>{{todoText || 'Hello World'}}</pre>
or use this
<h1 ng-repeat="line in todoText.split('\n')">
{{line}}
</h1>
Jquery approach
$("textarea").on('keypress',function(e){
if(e.keyCode == 13){
$('h1').html($("textarea").val())
}
})

How to send large amounts of HTML form input to Flask?

I have an HTML form where users can add an unlimited amount of a pair of text fields. I have used some Javascript so that each new text input has a Div surrounding it with a unique ID to identify each text field separately. Like this:
<div id="1">
<textarea name="firstTextArea"></textarea>
<textarea name="secondTextArea"></textarea>
</div>
<div id="2">
<textarea name="firstTextArea"></textarea>
<textarea name="secondTextArea"></textarea>
</div>
<div id="3">
<textarea name="firstTextArea"></textarea>
<textarea name="secondTextArea"></textarea>
</div>
and so forth.
How can I request this data from the form into Flask? It would be easy if there was a fixed number of inputs but the number of inputs will vary depending on what the user chooses.
One way I have thought of doing this is to count the number of input fields of the HTML form though I'm not sure how to count it using Javascript and then sending/requesting it to Flask along with the text field data.
What would be the best way to go about this?
I found a way to solve this issue using this code:
firstTextArea = []
secondTextArea = []
x = 1
while True:
try:
firstTextArea.append(request.form['firstTextArea' + str(x)])
secondTextArea.append(request.form['secondTextArea' + str(x)])
except:
break
x += 1
Instead of naming the DIVs, I uniquely named each textarea, so that I can identify them in the code above.

Javascript Remaining Characters without input

Is it possible to have a pure Javascript text remaining counter that outputs the value in a <span> or <p> tag rather than an input field? I can only find Jquery solutions or ones that output in input fields.
Have seen over the net that a lot of people are wanting a remaining characters counter that is pure Javascript and doesn't preview the number in an input box. I was messing around with JSFiddle lastnight and did a little work around and was able to get the remaining characters to show in other tags such as <span>. So I would just like to share this with everyone and hope it might come in handy.
HTML:
<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100);" onKeyUp="textCounter('message','messagecount',100);"></textarea>
<span id="charsleft"></span>
Javascript:
<script>
function textCounter(textarea, countdown, maxlimit) {
var textareaid = document.getElementById(textarea);
if (textareaid.value.length > maxlimit)
textareaid.value = textareaid.value.substring(0, maxlimit);
else
document.getElementById('charsleft').innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
}
</script>
<script type="text/javascript">
textCounter('message','messagecount',100);
</script>
Here is also a working JSFiddle
Note: Should anyone want to contribute to the script to make it better, please feel free to do so. I am not an expert in Javascript so it most likely a more user friendly solution.
Kind Regards
something like the following should also work if you put jQuery on the page (and why wouldn't you :)):
$('#text-input-area').keyup(function(){
$('#target-div').text(max_length-$(this).val().length + " characters remaining");
})
Lodder's answer is perfect - except that I could not re-use it on the same page. I have tweaked the code to pass the name of the span, so it can be re-used on the same page.
<script>
function textCounter(textarea, countdown, maxlimit, nameofspan) {
var textareaid = document.getElementById(textarea);
if (textareaid.value.length > maxlimit)
textareaid.value = textareaid.value.substring(0, maxlimit);
else
document.getElementById(nameofspan).innerHTML = '('+(maxlimit-textareaid.value.length)+' characters available)';
}
</script>
<textarea id="message" cols="20" rows="5" name="message" onKeyDown="textCounter('message','messagecount',100,'messagespan');" onKeyUp="textCounter('message','messagecount',100,'messagespan');"></textarea>
<span id="messagespan"></span>
<script type="text/javascript">
textCounter('message','messagecount',100,'messagespan');
</script>

How to copy newline characters from HTML div to textarea in jQuery?

Consider the following HTML page fragment:
<div id='myDiv'>
Line 1.<br />
Line 2<br />
These are &ltspecial> characters & must be escaped !##><>
</div>
<input type='button' value='click' id='myButton' />
<textarea id='myTextArea'></textarea>
<script>
$(document).ready(function () {
$('#myButton').click(function () {
var text = $('#myDiv').text();
$('#myTextArea').val(text);
});
});
</script>
First, there is a div element with id myDiv. It contains some text similar to what might be retrieved form a SQL database at runtime in my production web site.
Next, there is a button and a textarea. I want the text in myDiv to appear in the textarea when the button is clicked.
However, using the code I provided, the line-breaks are stripped out. What can I do about this, taking into consideration that escaping special characters is absolutely non-negotiable?
Your code works great for me in both Firefox and Chrome: http://jsfiddle.net/jYjRc/
However, if you have a client that doesn't do what you want, replace <br>s with newline characters.
Edit: Tested in IE7 and the code breaks. So I updated the fiddle with my suggestion: http://jsfiddle.net/jYjRc/1/
Do your HTML like so:
<div id='myDiv'><pre>
Line 1.
Line 2
These are &ltspecial> characters & must be escaped !##><>
</pre></div>
And now .text() will return the text exactly as you specify it in the <pre> tag, even in IE.

Categories