Maybe this is going a bit too far back but… Also, I’d like to suggest that multiline text fields have a different type (e.g. “textarea”) than single-line fields (“text”), as they really are different types of things, and imply different issues (semantics) for client-side handling. – Marc Andreessen, 11 October 1993
For <textarea>s the spec specifically outlines that carriage returns + line breaks in the placeholder attribute MUST be rendered as linebreaks by the browser. User agents should present this hint to the user when the element’s value is the empty string and the control is not focused (e.g. by displaying it inside a blank unfocused … Read more
textarea { white-space: pre; overflow-wrap: normal; overflow-x: scroll; } white-space: nowrap also works if you don’t care about whitespace, but of course you don’t want that if you’re working with code (or indented paragraphs or any content where there might deliberately be multiple spaces) … so i prefer pre. overflow-wrap: normal (was word-wrap in older … Read more
The problem comes from the fact that line breaks (\n\r?) are not the same as HTML <br/> tags: var text = document.forms[0].txt.value; text = text.replace(/\r?\n/g, ‘<br />’); Since many of the comments and my own experience have shown me that this <br> solution is not working as expected, here is an example of how to … Read more
With Firefox, Safari (and other Gecko based browsers) you can easily use textarea.selectionStart, but for IE that doesn’t work, so you will have to do something like this: function getCaret(node) { if (node.selectionStart) { return node.selectionStart; } else if (!document.selection) { return 0; } var c = “\001”, sel = document.selection.createRange(), dul = sel.duplicate(), len … Read more
For XHTML, <input type=”text” disabled=”disabled” /> is the valid markup. For HTML5, <input type=”text” disabled /> is valid and used by W3C on their samples. In fact, both ways works on all major browsers.
This is not possible to do with a textarea. You are looking for a content editable div, which is very easily done: <div contenteditable=”true”></div> jsFiddle div.editable { width: 300px; height: 200px; border: 1px solid #ccc; padding: 5px; } strong { font-weight: bold; } <div contenteditable=”true”>This is the first line.<br> See, how the text fits here, … Read more
Borrowing heavily from other answers for similar questions (posted below)… document.getElementById(‘textbox’).addEventListener(‘keydown’, function(e) { if (e.key == ‘Tab’) { e.preventDefault(); var start = this.selectionStart; var end = this.selectionEnd; // set textarea value to: text before caret + tab + text after caret this.value = this.value.substring(0, start) + “\t” + this.value.substring(end); // put caret at right position … Read more
Use selectionStart/selectionEnd properties of the input element (works for <textarea> as well) function insertAtCursor(myField, myValue) { //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; } //MOZILLA and others else if (myField.selectionStart || myField.selectionStart == ‘0’) { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; myField.value = myField.value.substring(0, startPos) + myValue + … Read more
This one has always been a gotcha for me and many others. In short, the opening and closing tags for the <textarea> element must be on the same line, otherwise a newline character occupies it. The placeholder will therefore not be displayed since the input area contains content (a newline character is, technically, valid content). … Read more