如何在textarea中移动此标签？

Question

我想在textarea中移动标签。我如何使用CSS？

<li id='field_1_9' class='gfield' ><label class='gfield_label' for='input_1_9'>Place this inside the textarea</label><div class='ginput_container'><textarea name='input_9' id='input_1_9' class='textarea medium' tabindex='8'   rows='10' cols='50'></textarea></div></li>

http://jsfiddle.net/1smvym84/

非常感谢任何指导。

Answer 1

您可以使用占位符属性来完成此操作，对于旧版浏览器，您可以使用polyfill https://github.com/ginader/HTML5-placeholder-polyfill

<li id='field_1_9' class='gfield' >
    <div class='ginput_container'>
        <textarea name='input_9' placeholder="Place this inside the textarea" id='input_1_9' class='textarea medium' tabindex='8'   rows='10' cols='50'></textarea>
    </div>
</li>

Answer 2

更新小提琴，http://jsfiddle.net/1smvym84/2/ 你可以使用jquery。

$(document).ready(function(){

$('.textarea').text($('.gfield_label').text());

});

Answer 3

您也可以使用CSS hack：

http://jsfiddle.net/Preben/y1k7uLvr/

.gfield_label {position:relative;z-index:2;}
li {list-style:none;}
.ginput_container {margin-top:-20px;position:relative;z-index:1;}

这意味着将div容器向上移动20 px，并将标签放在z-index中div容器上方的位置。

（未在所有浏览器中测试过。）

Answer 4

以下是单击textarea时删除标签文本的完整示例：http://jsfiddle.net/1smvym84/5/

javascript：

var txt = "Place this inside the textarea";

$(document).ready(function(){

    $('.textarea').text(txt);

});

$("#input_1_9").focusin(function () {
    if ($(this).val() == txt) {
        $(this).val("");
    }
});
$("#input_1_9").focusout(function () {
    if ($(this).val() == "") {
        $(this).val(txt);
    }
});