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();
    }   
});

這是一段 測試文本