Is there a way to add bullet points to an HTML textarea?
I want to add a simple feature where a bullet point is added for every line in a text area (similar to a list bullet points).
Is there a way to add bullet points to an HTML textarea?
I want to add a simple feature where a bullet point is added for every line in a text area (similar to a list bullet points).
You can't do that but there is another way. delete the textarea.
'<section id="textarea" contenteditable="true">
<ul>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
<li>List item here</li>
</ul>
</section>'
As far as I know, you can't. But, you can get WYSIWYG editor where you can use bullets lists, and more (like images, bold, italic, etc .). Those WYSIWYG editor are fully customizable, so you can enable just the options you need. The most famous ones are : CKEDITOR : http://ckeditor.com/ TinyMCE : http://www.tinymce.com/
J. BENOIT.
Just use the hexidecimal unicode value: \u2022 . So you might add bullets to new lines in this manner:
$textarea.val($textarea.val().replace(/\n/g,"\n\u2022").replace(/\r/g,"\r\u2022"))
Simple use the below characters ● for the bullets:
<textarea rows="6" cols="20">
● Item1
● Item2
● Item3
● Item4
● Item5
</textarea>
This does the job very nicely. Set BULLET to whatever character code you prefer.
<head>
<script>
var CRLF = 10;
var BULLET = String.fromCharCode(45);
function Init() {
if (txt.addEventListener) txt.addEventListener("input", OnInput, false);
}
function OnInput(event) {
char = event.target.value.substr(-1).charCodeAt(0);
nowLen = txt.value.length;
if (nowLen > prevLen.value) {
if (char == CRLF) txt.value = txt.value + BULLET + " ";
if (nowLen == 1) txt.value = BULLET + " " + txt.value;
}
prevLen.value = nowLen;
}
</script>
</head>
<body onload="Init ();">
<h4>Automatic bullets in a text box</h4>
<textarea id="txt" rows="15" cols="40"></textarea>
<input type="hidden" id="prevLen" value="0"/>
</body>