HTML テキストエリアに箇条書きを追加する方法はありますか?
テキスト領域のすべての行に箇条書きが追加される単純な機能を追加したいと考えています (リストの箇条書きに似ています)。
それはできませんが、別の方法があります。テキストエリアを削除します。
'<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>'
これは非常にうまく機能します。BULLET を任意の文字コードに設定します。
<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>
箇条書きには以下の文字 ● を使用します。
<textarea rows="6" cols="20">
● Item1
● Item2
● Item3
● Item4
● Item5
</textarea>
私の知る限り、あなたはできません。ただし、箇条書きリストなど (画像、太字、斜体など) を使用できる WYSIWYG エディターを入手できます。これらの WYSIWYG エディターは完全にカスタマイズ可能なため、必要なオプションだけを有効にすることができます。最も有名なものは次のとおりです: CKEDITOR: http://ckeditor.com/ TinyMCE: http://www.tinymce.com/
J.ベノワ。
16 進数の Unicode 値を使用するだけです: \u2022 。したがって、次の方法で新しい行に箇条書きを追加できます。
$textarea.val($textarea.val().replace(/\n/g,"\n\u2022").replace(/\r/g,"\r\u2022"))