Einfügen von Text in caret - Einfügen neuer Linien und Tabulatorleerzeichen

Question

Ich habe einige Code, den ich vor einer Weile unten gemacht:

selected = ''; 
 

 
$('img').click(function(){ 
 
    console.log($(this).attr('alt')); 
 
\t selected = $(this).attr('alt'); 
 
}); 
 

 
$('#comments').click(function(){ 
 
\t insertAtCaret('comments',selected) 
 
    // Clear the selection so it isn't copied repeatedly 
 
    selected = ''; 
 
}); 
 

 
function insertAtCaret(areaId,text) { 
 
    var txtarea = document.getElementById(areaId); 
 
    var scrollPos = txtarea.scrollTop; 
 
    var strPos = 0; 
 
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
 
     "ff" : (document.selection ? "ie" : false)); 
 
    if (br == "ie") { 
 
     txtarea.focus(); 
 
     var range = document.selection.createRange(); 
 
     range.moveStart ('character', -txtarea.value.length); 
 
     strPos = range.text.length; 
 
    } 
 
    else if (br == "ff") strPos = txtarea.selectionStart; 
 

 
    var front = (txtarea.value).substring(0,strPos); 
 
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
 
    txtarea.value=front+text+back; 
 
    strPos = strPos + text.length; 
 
    if (br == "ie") { 
 
     txtarea.focus(); 
 
     var range = document.selection.createRange(); 
 
     range.moveStart ('character', -txtarea.value.length); 
 
     range.moveStart ('character', strPos); 
 
     range.moveEnd ('character', 0); 
 
     range.select(); 
 
    } 
 
    else if (br == "ff") { 
 
     txtarea.selectionStart = strPos; 
 
     txtarea.selectionEnd = strPos; 
 
     txtarea.focus(); 
 
    } 
 
    txtarea.scrollTop = scrollPos; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#!"><img src="smiley1.png" alt="{smiley001}"><img src="smiley2.png" alt="{smiley002}"><img src="smiley3.png" alt="{smiley003}"><img src="smiley4.png" alt="{smiley004}"><img src="smiley5.png" alt="{smiley005}"></a><br> 
 
<textarea id="comments" cols="50" rows="10"></textarea>

In diesem Code Sie auf ein Bild klicken und dann klickst du auf ein Leerzeichen im Textfeld und das Alt-Attribut des Bildes wird an der Position des Caret eingefügt.

Ich möchte Tab Leerzeichen und neue Zeilen für einige der Bilder einfügen, also welche Werte würde ich für die alt-Attribute der entsprechenden Bilder setzen?

Answer 1

Wenn ich richtig verstanden habe, versuchen Sie, eine whitespace-basierte Textformatierung zum alt-Attribut hinzuzufügen. Ich glaube nicht, dass dies möglich ist, es wird vom Browser in Leerzeichen umgewandelt. Sie können dazu eine data- attribute hinzufügen.