テキストエリアに箇条書きポイントを追加するには？

Question

テキストエリア内の「入力」ボタンをクリックすると、箇条書きを追加します。ここにコーディングがあります。それは全く機能しませんでした。私が間違っている？

<script> 
$(".todolist").focus(function() { 
    if(document.getElementById('todolist').value === ''){ 
     document.getElementById('todolist').value +='• '; 
    } 
}); 

$(".todolist").keyup(function(event){ 
var keycode = (event.keyCode ? event.keyCode : event.which); 
if(keycode == '13') 
{ 
    document.getElementById('todolist').value +='• '; 
} 
var txtval = document.getElementById('todolist').value; 
if(txtval.substr(txtval.length - 1) == '\n') 
{ 
    document.getElementById('todolist').value = txtval.substring(0,txtval.length - 1); 
    } 
}); 
</script> 


<form> 
<textarea id="todolist" class="todolist" name="todolist" rows="10" placeholder="Maintain your pending tasks"></textarea> 
</form> 

Answer 1

ここには、「enter」をクリックするとテキストエリア内に箇条書きポイントを追加する質問に含まれるコードが含まれています。あなたが変更する必要があるかもしれません

2つのこと：

1）コメントで@Alexiyで述べたようにそれはjavascriptのは、後に実行するように設定されていない限り、htmlコードは、それに作用するJavaScriptコードの前に来る必要があります文書の読み込みが完了します。

2）javascript内のjqueryを使用しているため、javascriptの前のページにjqueryがロードされていることを確認してください。他の人のよう

$(".todolist").focus(function() { 
 
    if (document.getElementById('todolist').value === '') { 
 
    document.getElementById('todolist').value += '• '; 
 
    } 
 
}); 
 

 
$(".todolist").keyup(function(event) { 
 
    var keycode = (event.keyCode ? event.keyCode : event.which); 
 
    if (keycode == '13') { 
 
    document.getElementById('todolist').value += '• '; 
 
    } 
 
    var txtval = document.getElementById('todolist').value; 
 
    if (txtval.substr(txtval.length - 1) == '\n') { 
 
    document.getElementById('todolist').value = txtval.substring(0, txtval.length - 1); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <textarea id="todolist" class="todolist" name="todolist" rows="10" placeholder="Maintain your pending tasks"></textarea> 
 
</form>

Answer 2

彼らのコメントに言及している、あなたが使用しているコードの問題は、ブラウザがHTMLコードに到達する前にスクリプトをロードしていること、です。

jQueryコード全体を$(document).ready()またはその短縮バージョンの1つにラップすることもできます。

ただし、この目的で<textarea></textarea>要素を使用せず、順序付けられていないリスト<ul></ul>を使用することをお勧めします。 編集できるようにするには、contenteditableの値をtrueに設定してdivにラップします。だから、あなたはこれを試すことができ、単一の空の銃弾から始め、このHTMLを使用します（何ジャバスクリプトは必要ありません！）

<div contenteditable="true"> 
 
    <ul> 
 
    <li></li> 
 
    </ul> 
 
</div>

Answer 3

します。 Javascriptを

$(document).ready(function(){ 
$('#txt').keyup(function(e){ 
if(e.keyCode == 13){ 
var h= $('#txt').val(); 
$('#txt').val(''); 
$('#txt').val(h+'*');// put your ascii code for special character 
} 
}); 
}); 

HTML：？

<textarea id="txt"></textarea>