Как добавить div в верхний правый угол текстового поля и начать текст после div (рис. Внутри)

Question

Таким образом, пользователь может ввести команду, которая активирует «ответ» -мод. Как я могу получить значок/div/label/etc в верхнем левом углу текстового поля, после чего начинается текст пользователя.

Вот ужасное представление, если то, что я хочу для того чтобы достигнуть (это абсолютно позиционирован, и текст имеет кучу пробелов, поэтому не реальное решение, только для примера.)

Answer 1

В случае ширина НАКЛАДКИ 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; 
} 

codepen: http://codepen.io/duonglk/pen/PGYdOp (с загруженными Bootstrap для хорошей UI)

Answer 2

сделал код для вас:

Вы должны использовать только float

.container{ 
 
    width:500px; 
 
    height:150px; 
 
} 
 

 
.inside{ 
 
    background-color:red; 
 
    width:60px; 
 
    height:10px; 
 
    float: left; 
 
}

<div class="container"> 
 
<div class="inside"> 
 

 
</div> 
 
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
</div>

Answer 3

Используется CSS text-inden недвижимости в текстовом поле

.container{ 
 
    position: relative; 
 
} 
 
.inside{ 
 
    background-color:red; 
 
    position: absolute; 
 
} 
 
textarea 
 
{ 
 
    text-indent: 150px; 
 
    width:100%; 
 
}

<div class="container"> 
 
<label class="inside"> 
 
    X replying to @abc 
 
</label > 
 
<textarea rows="5" html="true" id="text" >Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</textarea> 
 
</div>

Answer 4

Абсолютно позиционированные этикетки и text-indent на textarea

textarea { 
 

 
    text-indent: 150px; 
 
    line-height: 1.2em; 
 
} 
 

 
div { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 1em; 
 
} 
 

 
label { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 145px; 
 
    height: 1.2em; 
 
    background: lightgrey; 
 
}

<div> 
 
    <label for="">Your thing here</label> 
 
<textarea name="" id="" cols="50" rows="10">Lorem ipsum dolor sit Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem itaque dolore architecto cum, fuga excepturi, natus necessitatibus facere ipsum minima voluptas provident laudantium eum maiores rerum? Perspiciatis fugiat vel sapiente quod quasi quia modi ab consequuntur eaque nulla facere, possimus illum ducimus, rerum minima harum eligendi incidunt repellendus obcaecati, sit.</textarea> 
 
    </div

Answer 5

Попробуйте следующее решение:

<div style="position:relative"> 
    <textarea style="height:150px; width:200px; text-indent: 85px"> 
    </textarea> 
    <div style="position:absolute; height:20px; width:80px; background-color:gray; top:0px"></div> 
</div> 

Кроме того, пожалуйста, обратите внимание на: text-indent: 85px для того, чтобы начать первую строку после DIV