html - 如何在文本区域的右上角添加一个div，并让文本在div之后开始(内图)

Question

因此用户可以键入激活“回复”模式的命令。我怎样才能在用户文本开始的文本区域的左上角有徽章/div/标签/等。

如果我想要实现什么，这是一个糟糕的表示(这是绝对定位的，文本有一堆空格，所以不是真正的解决方案，仅作为示例。)

Answer 1

如果 overlay div 的宽度不固定，多一点 Javascript 就可以解决这个问题:

$(function(){
    var $overlay = $('#widget #overlay'),
        $textarea = $('#widget textarea')
    ;
    $textarea.css({
        textIndent: $overlay.width() + 'px'
    });
});

HTML:

<div class="container">
    <div id="widget">
        <div id="overlay">Replying to @jimc sac as cas cac </div>
        <textarea class="form-control">Some dummy text Some dummy text Some dummy text Some dummy text Some dummy text Some dummy text</textarea>
    </div>
</div>

CSS:

#widget{
    position: relative;
    border: 1px solid #CCCCCC;
}

#widget #overlay{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

#widget textarea{
    border: none;
    resize: vertical;
}

代码笔:http://codepen.io/duonglk/pen/PGYdOp (为漂亮的 UI 加载了 Bootstrap)