Develop Reference

How do you keep the tab level in a textarea when pressing enter?

When the user presses enter I want the cursor to move to a new line, but if they are currently indented by two tabs, then the cursor should stay indented two tabs.
I have already implemented the ignore tab event to stop the focus moving within the page, so I'm now just looking for the logic to keep the tab level on new line.
if(e.keyCode === 13){
//Logic here
}

http://jsfiddle.net/DVKbn/
$("textarea").keydown(function(e){
if(e.keyCode == 13){
// assuming 'this' is textarea
var cursorPos = this.selectionStart;
var curentLine = this.value.substr(0, this.selectionStart).split("\n").pop();
var indent = curentLine.match(/^\s*/)[0];
var value = this.value;
var textBefore = value.substring(0, cursorPos );
var textAfter = value.substring( cursorPos, value.length );
e.preventDefault(); // avoid creating a new line since we do it ourself
this.value = textBefore + "\n" + indent + textAfter;
setCaretPosition(this, cursorPos + indent.length + 1); // +1 is for the \n
}
});
function setCaretPosition(ctrl, pos)
{
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}

I improved the answer by Endless by using execCommand 'insertText' instead of modifying textarea.value.
Advantages:
Maintains undo-redo history of the <textarea>.
Maintains native behavior where any selected text is deleted.
Does not lag when value is 4000+ characters.
Shorter, simpler code.
Disadvantages:
Currently not supported by Firefox. (Use solution by Endless as fallback.)
$('textarea').on('keydown', function(e) {
if (e.which == 13) { // [ENTER] key
event.preventDefault() // We will add newline ourselves.
var start = this.selectionStart;
var currentLine = this.value.slice(0, start).split('\n').pop();
var newlineIndent = '\n' + currentLine.match(/^\s*/)[0];
if (!document.execCommand('insertText', false, newlineIndent)) {
// Add fallback for Firefox browser:
// Modify this.value and update cursor position as per solution by Endless.
}
}
});
<textarea style="width:99%;height:99px;"> I am indented by 8 spaces.
I am indented by a tab.</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Must say solutions based on one key press are obscure because people also like pasting text. Use input event instead. You can make it in jQuery like so:
$('textarea').on('input', function(e) {
var el = $(this);
var cur = $(this).prop('selectionStart'); // retrieve current caret position before setting value
var text = $(this).val();
var newText = text.replace(/^(.+)\t+/mg, '$1'); // remove intermediate tabs
newText = newText.replace(/^([^\t]*)$/mg, '\t\t$1'); // add two tabs in the beginning of each line
if (newText != text) { // If text changed...
$(this).val(newText); // finally set value
// and reset caret position shifted right by one symbol
$(this).prop('selectionStart', cur + 1);
$(this).prop('selectionEnd', cur + 1);
}
});
<textarea></textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
By the way I'm too lazy to explain how to watch tab count needed for user, this one just inserts two tabs on every line.

disable textarea by height not characters

So many times we want to limit how much a user can write, but here I have a special sized box that it has to fit in, so I want to disable adding more characters if it would surpass a specific height. here is what I did:
var over;
$('textarea').keypress(function(e){
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
var t = $(this).val();
jQuery('<div/>', {
style: "visibility:hidden",
text: t,
id: "test"
}).appendTo('body');
var h = $('#test').height();
if(h >= 100){
over = true;
}
else{
over = false;
}
if(over){
//code goes here
}
$('#test').remove();
});
I got the limiting code (what goes where I have the "code goes here" comment) from here and it ALMOST works.
There is only one problem:
if somebody copies and pastes, it can place multiple characters and therefore still go over the limit.
How can I fix this issue?
jsfiddle

Another somewhat hacky solution could be to check scroll on key up. If scroll exists, delete the last character while scroll exists:
function restrictScroll(e){
if(e.target.clientHeight<e.target.scrollHeight){
while(e.target.clientHeight<e.target.scrollHeight){
e.target.value = e.target.value.substring(0, e.target.value.length-1);
}
}
};
document.getElementById("textareaid").addEventListener('keyup', restrictScroll);
This would work as you type and if you paste blocks of text. Large text blocks may take a little longer to loop through though. In which case you may want to split on "\n" and remove lines first, then characters.
jsfiddle

If you want your function to fire whenever the text in your field changes, you can bind it to the input and propertychange events, as per this answer:
https://stackoverflow.com/a/5494697/20578
Like this:
$('#descrip').on('input propertychange', function(e){
This will make sure your code fires when e.g. the user pastes in content using the mouse.
As for stopping them from entering content that would go over the limit, I think you have to keep track of what content they've entered yourself, and then revert their last edit if it infringed your criteria.
Note that e.g. Twitter doesn't stop the user from entering more characters if they've gone over the limit - they just tell the user they're over the limit, and tell them when they're back under. That might be the most usable design.

You may try this:
$('#descrip').bind('paste',function(e) {
var el = $(this);
setTimeout(function() {
//Get text after pasting
var text = $(el).val();
//wath yu want to do
}, 100);
};
Jsfiddle
The solution is taken from here and here. It works by binding to the paste event. Since paste event is fired before the text is pasted, you need to use a setTimeout to catch the text after pasting. There is still some rough edges (i.e. if you select text and press backspace, it does not update).
Still, Spudley comment has some valid points, that you may want to consider.
Edit:
Note on the jsfiddle: It allow you to go over the limit when pasting, but once over the limits, you cannot paste (or type) more text until you go under the limit again.
Must be taken into account that, since you are limiting the text length by the size it ocuppies after rendering (wich have it own issues as pointed by Spudley), and not a defined lenth, you can know if a text fits or not, but not know how much of the text is inside the limits, and how much is out of them.
You may consider reseting textbox value to its previous value if pasted text makes imput go over the limit, like in this one.
However, for cutting down the text after pasting so as non-fitting text is left out, but the rest of the pasted text is allowed, you need an entirely different approach. You may try iterating over the text until you find how much of the new text is enough.
By the way, line feeds and seems to cause your original script to behave weirdly.

I've been able to get the program working:
var over = false;
var num = 0;
var valid_entry = "";
$('#descrip').keyup(function(e){
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
var t = $(this).val();
getMaxRow(t,key,this);
});
function getMaxRow(t,key,obj) {
jQuery('<div/>', {
"class": "hide",
text: t,
id: "test"
}).appendTo('body');
var h = $('#test').height();
$('#test').remove();
if(h >= 100){
num += 1;
if(num == 1){
var div = '<div id="message">You have run out of room</div>'
$('body').append(div);
}
over = true;
}
else{
over = false;
valid_entry = t;
if(num >= 1){
$('#message').remove();
num = 0;
}
}
if( over ) {
//Do this for copy and paste event:
while ( over ) {
//Try using a substring here
t = t.substr(0,(t.length-1));
over = getMaxRow(t,key,obj);
}
}
$(obj).val(valid_entry);
return over;
}

Can input be limited to html <textarea>? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
What is the best way to emulate an HTML input “maxlength” attribute on an HTML textarea?
My question is can a <textarea > be configured only to accept a certain number of characters? I can do this in the following JavaScript, but the person for whom I am designing this page does not want a status field.
My current way of doing things is I have a <textarea > that is part of a form that uses a nice JavaScript function to fill a message in a status box.
I also read SO and found Alerts and sounds really aren't the way to alert people, so the following code changes background color (and restores when appropriate) when there is an error.
Here is that code:
// Checks Form element TransDesc for overruns past 255 characters.
function warnOverDescLen()
{
var misc_text =
document.forms["InvGenPayTickets"]["TransDesc"].value;
var alert_text =
"You cannot enter more than 255 characters. Please remove some information.";
var rc = true;
if(255 < misc_text.length)
{
document.forms["InvGenPayTickets"]["trans_status"].value
= alert_text;
misc_text = misc_text.substring(0, 253);
document.forms["InvGenPayTickets"]["TransDesc"].value
= misc_text;
document.forms["InvGenPayTickets"]["trans_status"].style.backgroundColor
= "pink";
}
else
{
document.forms["InvGenPayTickets"]["trans_status"].value
= "";
document.forms["InvGenPayTickets"]["trans_status"].style.backgroundColor
= "lightgoldenrodyellow";
}
return rc;
}
<textarea rows="4" cols="60" name="TransDesc" id="TransDesc"
onkeypress="return warnOverDescLen();" ></textarea>
<span style="color: #50081E; font-weight: bold">Status</span>
<br />
<input type=text name="trans_status" id="trans_status" maxwidth="50"
size="65" />

This is a solution for HTML5, not supported by IE9 or earlier (according to this):
<textarea maxlength="255"></textarea>
Since you probably can't drop support for IE9 (and maybe even IE8), it's recommended you couple that with JavaScript, preventing the default behavior for the keydown and paste events on the textarea, as standup75 suggested.
Here is how to do that with plain JavaScript:
<textarea id="txtarea" maxlength="255"></textarea>
<script>
var field = document.getElementById('txtarea');
if(field.addEventListener) {
field.addEventListener('keydown', enforceMaxlength);
field.addEventListener('paste', enforceMaxlength);
} else {
// IE6-8
field.attachEvent('onkeydown', enforceMaxlength);
field.attachEvent('onpaste', enforceMaxlength);
}
function enforceMaxlength(evt) {
var maxLength = 255;
if(this.value.length >= maxLength) {
evt.preventDefault()
}
}
</script>
http://jsfiddle.net/snJwn/

HTML5 offers the maxLength attribute. Otherwise, you'd need some javascript, in jQuery, you'd do something like
maxLength = 50;
$("textarea").on("keydown paste", function(e){
if ($(this).val().length>=maxLength) e.preventDefault();
});

you can use the maxlength="255" (it specifies the maximum number of characters allowed in the element.)
or you can also do this by the jquery here i found the tutorial
html
<textarea cols="30" rows="5" maxlength="10"></textarea>
jquery
jQuery(function($) {
// ignore these keys
var ignore = [8,9,13,33,34,35,36,37,38,39,40,46];
// use keypress instead of keydown as that's the only
// place keystrokes could be canceled in Opera
var eventName = 'keypress';
// handle textareas with maxlength attribute
$('textarea[maxlength]')
// this is where the magic happens
.live(eventName, function(event) {
var self = $(this),
maxlength = self.attr('maxlength'),
code = $.data(this, 'keycode');
// check if maxlength has a value.
// The value must be greater than 0
if (maxlength && maxlength > 0) {
// continue with this keystroke if maxlength
// not reached or one of the ignored keys were pressed.
return ( self.val().length < maxlength
|| $.inArray(code, ignore) !== -1 );
}
})
// store keyCode from keydown event for later use
.live('keydown', function(event) {
$.data(this, 'keycode', event.keyCode || event.which);
});
});
Live example

How can I block further input in textarea using maxlength

I have a textarea that I want to block input on if the entered characters reaches a max-length.
I currently have a Jquery script for the textbox that calculates the characters entered and want to add something that will block input in the textarea once 150 characters are entered.
I have tried using max-length plugins in conjunction with my script but they don't seem to work. Help is appreciated.
CURRENT CODE
(function($) {
$.fn.charCount = function(options){
// default configuration properties
var defaults = {
allowed: 150,
warning: 25,
css: 'counter',
counterElement: 'span',
cssWarning: 'warning',
cssExceeded: 'exceeded',
counterText: '',
container: undefined // New option, accepts a selector string
};
var options = $.extend(defaults, options);
function calculate(obj,$cont) {
// $cont is the container, now passed in instead.
var count = $(obj).val().length;
var available = options.allowed - count;
if(available <= options.warning && available >= 0){
$cont.addClass(options.cssWarning);
} else {
$cont.removeClass(options.cssWarning);
}
if(available < 0){
$cont.addClass(options.cssExceeded);
} else {
$cont.removeClass(options.cssExceeded);
}
$cont.html(options.counterText + available);
};
this.each(function() {
// $container is the passed selector, or create the default container
var $container = (options.container)
? $(options.container)
.text(options.counterText)
.addClass(options.css)
: $('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>').insertAfter(this);
calculate(this,$container);
$(this).keyup(function(){calculate(this,$container)});
$(this).change(function(){calculate(this,$container)});
});
};
})(jQuery);

Have you tried ​the maxlength attribute? That will block input once the character limit is reached.
<textarea maxlength='150'></textarea>​​​​​​​​​​​​​​​​​​​​​​​​​​ // Won't work
<input type='text' maxlength='150' />
Edit It appears that maxlength for a textarea works in Chrome, but not in other browsers, my bad. Well, another approach would just be to monitor keydown events and if length>150, return false/preventDefault/however you want to stop the default action. You'd still want allow backspace and enter however, so monitor keycode as well.
$('#yourTextarea').keydown(function(e) {
if (this.value.length > 150)
if ( !(e.which == '46' || e.which == '8' || e.which == '13') ) // backspace/enter/del
e.preventDefault();
});

You're much better off not trying to prevent the user from typing in too many characters and instead showing a counter and only enforcing the character limit when the user tries to submit. The comment boxes Stack Overflow are a decent example. It's both easier technically and more importantly better for the user to do it this way: it's really irritating not to be able to type/paste/drag text into a textarea even if you know there's a character limit.

Textarea maxlength with Jquery works OK but probably doesn't solve the issue of pasting in larger amounts of text.
PB Edit: Has since been updated here

Try this code below i hope will work, remember to include jQuery library
<div class="texCount"></div>
<textarea class="comment"></textarea>
$(document).ready(function(){
var text_Max = 200;
$('.texCount').html(text_Max+'Words');
$('.comment').keyup(function(){
var text_Length = $('.comment').val().length;
var text_Remain = text_Max - text_Length;
$('.texCount').html(text_Remain + 'Words');
$('.comment').keydown(function(e){
if(text_Remain == 0){
e.preventDefault();
}
});
});
});

You can truncate the contents of the textarea if it is over 150 characters as described at http://web.enavu.com/daily-tip/maxlength-for-textarea-with-jquery/. I can see some issues with copy/pasting if that brings the text over the limit though.

How do I insert a character at the caret with javascript?

I want to insert some special characters at the caret inside textboxes using javascript on a button. How can this be done?
The script needs to find the active textbox and insert the character at the caret in that textbox. The script also needs to work in IE and Firefox.
EDIT: It is also ok to insert the character "last" in the previously active textbox.

I think Jason Cohen is incorrect. The caret position is preserved when focus is lost.
[Edit: Added code for FireFox that I didn't have originally.]
[Edit: Added code to determine the most recent active text box.]
First, you can use each text box's onBlur event to set a variable to "this" so you always know the most recent active text box.
Then, there's an IE way to get the cursor position that also works in Opera, and an easier way in Firefox.
In IE the basic concept is to use the document.selection object and put some text into the selection. Then, using indexOf, you can get the position of the text you added.
In FireFox, there's a method called selectionStart that will give you the cursor position.
Once you have the cursor position, you overwrite the whole text.value with
text before the cursor position + the text you want to insert + the text after the cursor position
Here is an example with separate links for IE and FireFox. You can use you favorite browser detection method to figure out which code to run.
<html><head></head><body>
<script language="JavaScript">
<!--
var lasttext;
function doinsert_ie() {
var oldtext = lasttext.value;
var marker = "##MARKER##";
lasttext.focus();
var sel = document.selection.createRange();
sel.text = marker;
var tmptext = lasttext.value;
var curpos = tmptext.indexOf(marker);
pretext = oldtext.substring(0,curpos);
posttest = oldtext.substring(curpos,oldtext.length);
lasttext.value = pretext + "|" + posttest;
}
function doinsert_ff() {
var oldtext = lasttext.value;
var curpos = lasttext.selectionStart;
pretext = oldtext.substring(0,curpos);
posttest = oldtext.substring(curpos,oldtext.length);
lasttext.value = pretext + "|" + posttest;
}
-->
</script>
<form name="testform">
<input type="text" name="testtext1" onBlur="lasttext=this;">
<input type="text" name="testtext2" onBlur="lasttext=this;">
<input type="text" name="testtext3" onBlur="lasttext=this;">
</form>
Insert IE
<br>
Insert FF
</body></html>
This will also work with textareas. I don't know how to reposition the cursor so it stays at the insertion point.

In light of your update:
var inputs = document.getElementsByTagName('input');
var lastTextBox = null;
for(var i = 0; i < inputs.length; i++)
{
if(inputs[i].getAttribute('type') == 'text')
{
inputs[i].onfocus = function() {
lastTextBox = this;
}
}
}
var button = document.getElementById("YOURBUTTONID");
button.onclick = function() {
lastTextBox.value += 'PUTYOURTEXTHERE';
}

Note that if the user pushes a button, focus on the textbox will be lost and there will be no caret position!

loop over all you input fields...
finding the one that has focus..
then once you have your text area...
you should be able to do something like...
myTextArea.value = 'text to insert in the text area goes here';

I'm not sure if you can capture the caret position, but if you can, you can avoid Jason Cohen's concern by capturing the location (in relation to the string) using the text box's onblur event.

A butchered version of #bmb code in previous answer works well to reposition the cursor at end of inserted characters too:
var lasttext;
function doinsert_ie() {
var ttInsert = "bla";
lasttext.focus();
var sel = document.selection.createRange();
sel.text = ttInsert;
sel.select();
}
function doinsert_ff() {
var oldtext = lasttext.value;
var curposS = lasttext.selectionStart;
var curposF = lasttext.selectionEnd;
pretext = oldtext.substring(0,curposS);
posttest = oldtext.substring(curposF,oldtext.length);
var ttInsert='bla';
lasttext.value = pretext + ttInsert + posttest;
lasttext.selectionStart=curposS+ttInsert.length;
lasttext.selectionEnd=curposS+ttInsert.length;
}