Insert text at caret - insert new lines and tab spaces

Question

I have some code that I made a while ago shown below:

selected = '';

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

$('#comments').click(function(){
 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 this code, you click on a picture and then you click on a space in the textarea and the picture's alt attribute is pasted at the position of the caret.

I want to insert tab spaces and new lines for some of the pictures, so what values would I put for the alt attributes of the corresponding images?

score 0 · Accepted Answer · edited May 23 '17 at 12:09

0

If I understand correctly, you're trying to add some whitespace based text formatting to the alt attribute. I don't think this is possible, it will be converted to spaces by the browser. You may add a data- attribute to handle this.

edited May 23 '17 at 12:09

Community

1
1

answered Aug 10 '16 at 12:00

balint

3,391
7
41
50

what do I put in the data attribute for whitespace? – Aug 10 '16 at 15:35
for example the urlencoded original text (with tabs or new lines), what you can urldecode when inserted. This way you will not break the UI/UX nor the validity of the Html. – balint Aug 10 '16 at 15:56

Insert text at caret - insert new lines and tab spaces

1 Answers1