Fiverr風格textarea與CSS和JS

我不想做一個textarea看起來像fiverr textarea創建一個演出，文本「我會」是固定和禁用，我可以寫在旁邊。 enter image description here Fiverr風格textarea與CSS和JS

我設法創建CSS enter image description here 類似的東西，但我被困在下面的問題時，該文本在多行寫的第一個固定的文本不會移動與其他線頂部的用戶寫道

我知道JavaScript是解決方案，但我不知道究竟如何，請任何想法？我使用angularJS，如果有任何特定的角度，它也受到歡迎。這裏是我的代碼：

<label class="item item-input" id="questionArea" style="margin-top: -30px;"> 
     <textarea class="text-combien" style="height:100px;padding-right:15px;" ng-model="question.text" placeholder=""> </textarea> 
     <div class="before-text">Pour Combien,</div> 
     <div class="ask-text">?</div> 
     </label>

來源

2015-03-24 zerzer

你可以使實際輸入trasparent的邊界用。之前與「我會」的一部分，並將其包裝在邊界 – 2015-03-24 22:05:24

的東西這樣的事情：http://jsbin.com/tolifa/1/watch?html,css,output？ – balexandre 2015-03-24 22:29:20

@balexandre謝謝你的回覆，你寫的jsbin是我現在的東西，但看看第三張圖片。這就是當用戶寫多於兩行或三行時發生的情況 – zerzer 2015-03-24 23:13:20

我一直在尋找的答案就在這裏： https://jsfiddle.net/ttwbxwon/66/ 具有以下綁定到文本區域的onscroll事件javascript函數：

function heigthChange() { 
    var e = document.getElementById("text-combien"); 
    var height = e.scrollTop; 
    document.getElementById("before-text").style.top = (0 - height) + "px" ; 
}

來源

2015-03-31 16:03:30 zerzer

您可以使用文本域的text-indent CSS屬性，然後你只需要定位的跨度去哪裏你縮進的文本。看看這jsFiddle。你將需要根據你想要的字體來調整定位/大小。

<div id="container"> 
<textarea placeholder="do something I'm really good at"></textarea> 
<span class="textbox-prefix">I will</span> 
</div> 
<style type="text/css"> 
.textbox-prefix{ 
    position:absolute; 
    top:11px; 
    left:10px; 
    font-family: monospace; 
} 

textarea{ 
    text-indent: 50px; 
    width:300px; 
    height;200px; 
} 
</style>

來源

2015-03-24 22:18:24 Joseph

是的，這是我現在的，但看看圖片3這是我真正的問題，當我寫了太多的行我需要的文字向上移動 – zerzer 2015-03-24 23:10:00

Fiverr風格textarea與CSS和JS

回答

相關問題