Отступы textarea на keydown/нажмите

Question

У меня есть надпись поверх моего textarea.

Когда кто-то нажимает или KeyDown «с на текстовое поле, я стараюсь, чтобы получить текст, чтобы перейти к краю этикетки, чтобы она выглядит, что на самом деле, где начинается текстовое поле.

То, что у меня есть сейчас, это поиск ширины метки, а затем добавление соответствующего количества пробелов в начало текстовой области.

Firefox и Safari получите это очень близко к ярлыку. Но хром добавляет несколько лишних пробелов.

Может ли кто-нибудь помочь мне найти более подходящий подход?

http://jsfiddle.net/3jGv7/2/

function cursorPosition(data) { 
    var labelWidth = $(data).siblings('[class=indent]').width(), 
     spaces = Math.round(labelWidth/3.6) + 1, 
     sVar = ""; 
    for (var x = 1; x <= spaces; x++) { 
     sVar += " "; 
    } 
    if (!data.value.match(/^[ ]{'+spaces+'}/)) { 
     data.value = sVar + data.value.replace(/^\s+/, ""); 
    } 
    if (data.selectionStart < spaces) { 
     data.selectionStart = spaces; 
    } 
} 

Answer 1

Вы можете сделать это с помощью CSS:

text-indent: 165px; 

jsFiddle Demo

Если вы хотите версию JQuery:

var indentWidth = $('textarea.indent').prev('div.indent').width(); 
$('textarea.indent').css('text-indent', indentWidth+'px'); 

jsFiddle Demo