在textarea的占位符属性中插入换行符？

时间：2011-09-05 20:50:04

标签： html

我尝试了一些方法但没有效果。有没有人知道解决这个问题的好方法？

<textarea placeholder='This is a line \n this should be a new line'></textarea>

<textarea placeholder='This is a line     
should this be a new line?'></textarea> <!-- this works in chrome apparently -->

更新：它在chrome中不起作用。这只是textarea的宽度。

请参阅： http://jsfiddle.net/pdXRx/

22 个答案:

答案 0 :(得分：206)

您可以在占位符属性中插入新的行html实体&#10;：

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

适用于： Chrome 62，IE10

不能继续工作： Firefox 57，Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/

答案 1 :(得分：56)

您可以将文字添加为value，其中包含换行符\n。

$('textarea').attr('value', 'This is a line \nthis should be a new line');

然后您可以在focus上将其删除，然后在blur上将其应用回来（如果为空）。像这样的东西

var placeholder = 'This is a line \nthis should be a new line';
$('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/

不是纯粹的CSS，而不是 clean ，但这样做。

答案 2 :(得分：56)

不要以为你被允许这样做：http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

相关内容（强调我的）：

  

占位符属性表示短提示（单词或短语）   短语）用于在控件具有时帮助用户输入数据   没有价值。提示可以是样本值或简要描述   预期的格式。 如果指定了该属性，则该属性必须具有该值   不包含U + 000A LINE FEED（LF）或U + 000D CARRIAGE RETURN（CR）   字符。

答案 3 :(得分：49)

更新（2016年1月）：这个漂亮的小黑客可能无法在所有浏览器上运行，所以我有一个新的解决方案，下面有一点点javascript。

一个不错的小黑客

感觉不太好，但你可以把新行放在html中。像这样：

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
        1 Long St
        London
        Postcode
        UK"></textarea>

注意每一行都在一个新行上（没有被包装），每个'tab'缩进是4个空格。虽然这不是一个非常好的方法，但似乎有效：

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

  • 每行的缩进级别可能会根据文本区域的宽度而有所不同。
  • 在css中使用resize: none;非常重要，这样textarea的大小就固定了（参见jsfiddle）。

<强>替代地 当你想要一个新行时，点击返回两次（所以你的'新行'之间有一个空行。创建的'空行'需要有足够的标签/空格，等于你的textarea的宽度。它没有'如果你有太多东西似乎很重要，你只需要足够的东西。虽然这很脏，但可能不符合浏览器。我希望有一个更简单的方法！

更好的解决方案

查看JSFiddle。

  • 此解决方案将div放在textarea后面。
  • 一些javascript用于更改textarea的背景颜色，适当地隐藏或显示占位符。
  • 输入和占位符必须具有相同的字体大小，因此两个mixin。
  • textarea上的box-sizing和display: block属性非常重要，或者它背后的div的大小不同。
  • 在textarea上设置resize: vertical和min-height也很重要 - 请注意占位符文本将如何换行并展开textarea将保持白色背景。但是，注释掉resize属性会在水平扩展textarea时出现问题。
  • 只需确保textarea上的最小高度足以覆盖整个占位符的最小宽度。**

JSFiddle Screenshot

HTML：

<form>
  <input type='text' placeholder='First Name' />
  <input type='text' placeholder='Last Name' />
  <div class='textarea-placeholder'>
    <textarea></textarea>
    <div>
      First Line
      <br /> Second Line
      <br /> Third Line
    </div>
  </div>
</form>

SCSS：

$input-padding: 4px;

@mixin input-font() {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
}

@mixin placeholder-style() {
  color: #999;
  @include input-font();
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  width: 250px;
}

input,textarea {
  display: block;
  width: 100%;
  padding: $input-padding;
  border: 1px solid #ccc;
}

input {
  margin-bottom: 10px;
  background-color: #fff;

  @include input-font();
}

textarea {
  min-height: 80px;
  resize: vertical;
  background-color: transparent;
  &.data-edits {
    background-color: #fff;
  }
}

.textarea-placeholder {
  position: relative;
  > div {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: $input-padding;
    background-color: #fff;
    @include placeholder-style();
  }
}

::-webkit-input-placeholder {
  @include placeholder-style();
}
:-moz-placeholder {
  @include placeholder-style();
}
::-moz-placeholder {
  @include placeholder-style();
}
:-ms-input-placeholder {
  @include placeholder-style();
}

使用Javascript：

$("textarea").on('change keyup paste', function() {
  var length = $(this).val().length;
  if (length > 0) {
    $(this).addClass('data-edits');
  } else {
    $(this).removeClass('data-edits');
  }
});

答案 4 :(得分：14)

CSS解决方案如何：http://cssdeck.com/labs/07fwgrso 

::-webkit-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

::-moz-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

:-ms-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

答案 5 :(得分：11)

Salaamun Alekum 

&#10;

适用于谷歌浏览器

enter image description here 

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>
  

我在Windows 10.0（Build 10240）和Google Chrome版本上测试了这个   47.0.2526.80米

     

08:43:08 AST 6 Rabi Al-Awwal，1437，2015年12月17日，星期四

谢谢

答案 6 :(得分：8)

你不能在占位符属性中这样做。你甚至不能在占位符中对&#13;&#10;之类的新行进行编码。

一个小型演示：

http://jsfiddle.net/pdXRx/5/

答案 7 :(得分：5)

你不能用纯HTML做，但这个jQuery插件会让你：https://github.com/bradjasper/jQuery-Placeholder-Newlines

答案 8 :(得分：5)

试试这个： 

<textarea
placeholder="Line1&#x0a;&#x09;&#x09;&#x09;Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>

http://jsfiddle.net/vr79B/

答案 9 :(得分：5)

仅添加＆＃10作为换行符，无需编写任何CSS或javascript。 

textarea{
    width:300px;
    height:100px;

}
<textarea placeholder='This is a line this &#10should be a new line'></textarea>

<textarea placeholder=' This is a line 

should this be a new line?'></textarea>

答案 10 :(得分：4)

Jason Gennaro答案的略微改进版本（见代码评论）：

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();

答案 11 :(得分：4)

我喜欢Jason Gennaro和Denis Golomazov的作品，但我想要一些更有用的东西。我修改了这个概念，以便可以将其添加到任何页面而不会产生反响。

http://jsfiddle.net/pdXRx/297/ 

<h1>Demo: 5 different textarea placeholder behaviors from a single JS</h1>

<h2>Modified behaviors</h2>

<!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute -->

<textarea placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address' placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<h2>Standard behaviors</h2>

<textarea placeholder='Address'>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address'></textarea>

javascript非常简单

<script>
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>

答案 12 :(得分：4)

使用&#10;代替/n这将更改该行。

答案 13 :(得分：2)

我修改了@Richard Bronosky的小提琴like this。

使用data-*属性而不是自定义属性是更好的方法。 我将<textarea placeholdernl>替换为<textarea data-placeholder>以及其他一些样式。

<强>编辑
这是理查德的original answer，其中包含完整的代码段。

答案 14 :(得分：2)

HTML 

<textarea data-placeholder="1111\n2222"></textarea>

JS 

$('textarea[data-placeholder]').each(function(){
    var $this = $(this),
        placeholder = $this.data('placeholder'),
        placeholderSplit = placeholder.split('\\n');
    placeholder = placeholderSplit.join('\n');
    $this.focus(function(){
        var $this = $(this);
        if($this.val() === placeholder){
            $this.val('');
            // $this.removeClass('placeholder');
        }
    }).blur(function(){
        var $this = $(this);
        if($this.val() == '') {
            $this.val(placeholder);
            // $this.addClass('placeholder');
        }
    }).trigger('blur');
});

答案 15 :(得分：1)

非常简单

  var position = your break position;
    var breakLine = "&#13;&#10;";//in html 
    var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
    return output;

值表示原始字符串

答案 16 :(得分：1)

使用自定义占位符查看此解决方案。

  • 您可以获得适用于所有浏览器（包括Firefox）的多行占位符
  • 可以根据需要自定义占位符

Demo on fiddle 

$(document).on('input', '#textArea', function () {
	
        if ($('#textArea').val()) {
            $('#placeholderDiv').hide();
        } else {
            $('#placeholderDiv').show();
        }   
});
#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;
    /* When set background-color: transparent - Firefox  displays
    unpleasant textarea border. Set border style to fix it.*/
    border: 1px solid #a5a5a5;
}

#placeholderDiv {
    position: absolute;
    top: 0;
    padding: 6px 13px;
    color: #a5a5a5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="textAreaWrap">
    
<textarea id="textArea"></textarea>

<!-- Check here. If textarea has content -
     set for this div attribute style="display: none;" -->
<div id="placeholderDiv">Multiline textarea<br>
                         placeholder<br>
                         <br>
                         that works in Firefox</div>
    
</div>

答案 17 :(得分：0)

我不喜欢在聚焦textarea时隐藏占位符。所以我创建了一个构造函数Placeholder，它看起来与内置占位符完全相同，也适用于谷歌浏览器以外的其他浏览器。它非常方便，因为您可以根据需要经常使用var textarea = document.getElementById("textarea"); new Placeholder(textarea, "Line 1\nLine 2\nLine 3"); function Placeholder(el, placeholder) { if (el.value == "" || el.value == placeholder) { el.style.color = "gray"; el.value = placeholder; el._plc = true; el.className += " unselectable"; } function keyPress(e) { window.setTimeout(function() { var replaced = reverseStr(el.value).replace(reverseStr(placeholder), ""); if (el.value == "") { el.value = placeholder; el.style.color = "gray"; cursorToStart(el); el._plc = true; el.className += " unselectable"; } else if (el._plc && el.value.endsWith(placeholder) && replaced !== "") { el.value = reverseStr(replaced); el.style.color = "black"; el._plc = false; el.readOnly = false; el.className = el.className.replace("unselectable", ""); } else if (el._plc && el.readOnly) { var ch = String.fromCharCode(e.charCode); if (e.keyCode == 13) ch = "\n"; // ENTER else if (e.charCode == 0) return; // non-character keys el.value = ch; el.style.color = "black"; el._plc = false; el.readOnly = false; el.className = el.className.replace("unselectable", ""); } }, 10); } el.addEventListener("keypress", keyPress, false); el.addEventListener("paste", keyPress, false); el.addEventListener("cut", keyPress, false); el.addEventListener("mousedown", function() { if (el._plc) el.readOnly = true; }, false); el.addEventListener("mouseup", function() { el.readOnly = false; if (el._plc) cursorToStart(el); }, false); function cursorToStart(input) { if (input.createTextRange) { var part = input.createTextRange(); part.move("character", 0); part.select(); } else if (input.setSelectionRange){ input.setSelectionRange(0, 0); } input.focus(); } function reverseStr(str) { if (!str) return ""; return str.split("").reverse().join(""); } }函数，它甚至不需要jQuery。

修改

它现在还处理特殊情况，例如正确插入占位符。

textarea {
    border: 1px solid gray;
    padding: 3px 6px;
    font-family: Arial;
    font-size: 13px;
    transition: .2s;
}
textarea:hover, textarea:focus {
    border-color: #2277cc;
}
textarea:focus {
    box-shadow: inset 0 0 5px #85B7E9;
}
*.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}
<textarea id="textarea"></textarea>
{{1}}

答案 18 :(得分：0)

Textarea尊重占位符的空白属性。 https://www.w3schools.com/cssref/pr_text_white-space.asp

将其设置为预行功能为我解决了这个问题。

textarea {
  white-space: pre-line;
}
<textarea placeholder='This is a line     
should this be a new line'></textarea>

答案 19 :(得分：0)

如果您的实现允许，则可以使用占位符显示的选择器和超级背景来解决此问题。

textarea:not(:placeholder-shown) {
  background: #fff;
}

div {
  top: 0;
  left: 14px;
  color: rgba(0,0,0,0.4);
  z-index: -1;
  position: absolute;
  line-height: 1.2;
  white-space: pre-wrap;
}

https://codepen.io/franciscoaquino/pen/YzyBPYK

选择器支持：

https://caniuse.com/#feat=css-placeholder-shown

答案 20 :(得分：0)

基于三种不同技巧的结合，我发现这似乎在我测试过的所有浏览器中都有效。

HTML：

<textarea placeholder="Line One&#10;Line Two&#10;&#10;Line Four"></textarea>

JS位于HTML文件底部：

<script>
    
    var textAreas = document.getElementsByTagName('textarea');

    Array.prototype.forEach.call(textAreas, function(elem) {
        elem.placeholder = elem.placeholder.replace(/\u000A/g, 
        '                                                     \
                                                              \
                                                              \
        \n\u2063');
    });

</script>

请注意，多余的空间将导致环绕，但必须有足够的空间来填充文本区域的宽度，我放置了足够的空间以适合我的项目，但是您可以通过观察观察来生成并健壮它们textarea.width并计算适当的基数。

答案 21 :(得分：0)

如果您在 ASP.NET 项目中使用 Razor，您可以执行以下操作，这对非常长的占位符值很有帮助：

@{ 
    string strPlaceholder = "Shipment Id to Update, Container Id to Update, New Tracking Number \r\n"
        + "Shipment Id to Update, Container Id to Update, New Tracking Number \r\n"
        + "Shipment Id to Update, Container Id to Update, New Tracking Number \r\n"
        + "\r\n"
        + "i.e. to update all containers with shipment Id 5803407, etner like this: \r\n"
        + "5803407, , 1Z20579A0322337062 \r\n"
        + "\r\n"
        + "or to update a specific container Id, enter like this: \r\n"
        + "5803407, 112546247, 1Z20579A0322337062 \r\n"
        ;
}
<textarea type="text" class="form-control" style="height:650px;" id="ShipmentList" name="ShipmentList" 
            placeholder="@strPlaceholder" required></textarea>

enter image description here

相关问题
最新问题