Wie man Aufzählungszeichen in einem Textfeld hinzufügt?

Question

Ich möchte einen Aufzählungspunkt hinzufügen, wenn ich auf die Schaltfläche "Enter" in Textarea klicke. Hier ist die Codierung. Es hat überhaupt nicht funktioniert. Liege ich falsch?

<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

Hier ist der in der Frage enthaltene Code, der einen Aufzählungspunkt im Textbereich hinzufügt, wenn Sie auf Enter klicken.

Zwei Dinge, die Sie ändern können müssen:

1) Wie in den Kommentaren von @Alexiy erwähnt, wird der HTML-Code vor dem JavaScript-Code auf sie einwirkenden kommen muss, es sei denn, dass Javascript nach ausgeführt wird Das Dokument wird geladen.

2) Stellen Sie sicher, dass Sie jquery auf der Seite vor dem Javascript laden, da Sie jquery in Ihrem Javascript verwenden.

$(".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

Wie andere in ihren Kommentaren erwähnt haben, das Problem mit dem Code, den Sie unter Verwendung sind, dass Sie das Skript geladen werden, bevor der Browser auf den HTML-Code erhält.

Eine mögliche Überwindung ist, Ihren gesamten jQuery-Code in $(document).ready() oder eine seiner gekürzten Versionen zu verpacken.

Allerdings würde ich empfehlen, das <textarea></textarea> Element für diesen Zweck nicht zu verwenden, aber mit der ungeordneten Liste <ul></ul>. Um es zu bearbeiten, können Sie es in ein div mit contenteditable Wert auf True umbrechen. Also mit einer einzigen leeren Kugel zu starten, verwenden Sie dieses HTML (kein Javascript erforderlich!)

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

Answer 3

Sie dies versuchen. 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>