【问题标题】:Insert text at caret - insert new lines and tab spaces在插入符号处插入文本 - 插入新行和制表符空格
【发布时间】:2016-08-10 11:28:14
【问题描述】:

我之前编写的一些代码如下所示:

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>

在此代码中,您单击图片,然后单击文本区域中的空格,然后将图片的 alt 属性粘贴到插入符号的位置。

我想为一些图片插入制表符和换行符,那么我应该为相应图片的 alt 属性设置什么值?

【问题讨论】:

    标签: javascript jquery html newline caret


    【解决方案1】:

    如果我理解正确,您正在尝试向 alt 属性添加一些基于空格的文本格式。我认为这是不可能的,它会被浏览器转换为空格。您可以添加data- attribute 来处理此问题。

    【讨论】:

    • 我在 data 属性中为空格添加了什么?
    • 例如 urlencoded 原始文本(带有制表符或换行符),插入时可以 urldecode 的内容。这样您就不会破坏 UI/UX 也不会破坏 Html 的有效性。
    猜你喜欢
    • 2014-02-19
    • 1970-01-01
    • 2016-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-21
    • 2011-01-08
    • 1970-01-01
    相关资源
    最近更新 更多