html5 textarea 的 placeholder 换行的几种方式

html5 textarea 的 placeholder 换行的几种方式

在最近的项目中，设计图中的一个textarea文本输入框中要求提示文本多行显示，百度一下，总结出几个textarea文本输入框提示文本换行的方法

一、在placeholder中的文字换行输入

<textarea  placeholder="这是
                        一段
                        测试
                        文本"></textarea>

　

http://jsfiddle.net/01taylop/HDfju/

二、使用 


<textarea rows="4" placeholder="这是&#10;一段&#10;测试&#10;文本"></textarea>

　

三、使用js控制

html

<textarea id="textarea"></textarea>

js

var placeholder = '这是一段\n测试文本';
$('#textarea').attr('value', placeholder);

$('#textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('#textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});

http://jsfiddle.net/airandfingers/pdXRx/247/

四、使用div模拟提示

css

#textAreaWrap {
    position: relative;
    background-color: white;
}

#textArea {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 100px;
    min-height: 100px;
    padding: 6px 12px;
    resize: vertical;
    background-color: transparent;
    border: 1px solid #a5a5a5;
}

#placeholderDiv {
    position: absolute;
    top: 0;
    padding: 6px 13px;
    color: #a5a5a5;
}

html

<div id="textAreaWrap">
    <textarea id="textArea"></textarea>
    <div id="placeholderDiv">这是一段<br>
                         测试文本<br>
    </div>
</div>

js

$(document).on('input', '#textArea', function () {
    if ($('#textArea').val()) {
        $('#placeholderDiv').hide();
    } else {
        $('#placeholderDiv').show();
    }   
});

这是一段 测试文本