在文本区域的占位符属性内插入换行符?

我尝试了一些方法，但没有一个奏效。有人知道绕过这个的妙招吗?

<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/

当前回答

但需要注意的是，问题的前提与W3规范不一致，因此不能保证行为，解决方案使用&x10;工作时<textarea>是要在HTML中定义:

<textarea 
  placeholder="HTML entity works &#10; but unicode entity hard-coded \u000A !">
</textarea>

但是如果<textarea>是用JavaScript创建的，那么
实体将在输出中硬编码。然而，使用unicode等效的\u000A是可以的:

let myArea = document.createElement("textarea");
myArea.placeholder = "Unicode works \u000A But HTML entity hard-coded &#10; !";

2022-09-30 12:42:28

其他回答

更新(2016年1月):这个漂亮的小黑客可能不再适用于所有浏览器，所以我有一个新的解决方案，下面有一小部分javascript。

一个不错的小技巧

这感觉不太好，但你可以把新行放到html中。是这样的:

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House " 朗街1号伦敦邮政编码英国" > < / >文本区域

注意，每一行都在新行上(没有被换行)，每个“制表符”缩进是4个空格。虽然这不是一个很好的方法，但它似乎是有效的:

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

每行的缩进程度可能会根据文本区域的宽度而变化。重要的是设置resize: none;在css中，这样文本区域的大小是固定的(参见jsfiddle)。

另外当你想要一个新的行，点击返回两次(所以在你的“新行”之间有一个空行。这个“空行”创建需要有足够的制表符/空格，将等同于你的文本区域的宽度。如果你有太多似乎并不重要，你只需要足够。这太脏了，可能不兼容浏览器。我希望有更简单的方法!

更好的解决方案

查看JSFiddle。

This solution positions a div behind the textarea. Some javascript is used to change the background colour of the textarea, hiding or revealing the placeholder appropriately. The inputs and placeholders must have the same font sizes, hence the two mixins. The box-sizing and display: block properties on the textarea are important or the div behind it will not be the same size. Setting resize: vertical and a min-height on the textarea are also important - notice how the placeholder text will wrap and expanding the textarea will keep the white background. However, commenting out the resize property will cause issues when expanding the textarea horizontally. Just make sure the min-height on the textarea is enough to cover your entire placeholder at its smallest width.**

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

2012-11-05 11:18:55

在php工作良好反斜杠+ r (\r):

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

2022-09-20 08:26:52

我不喜欢隐藏占位符当你聚焦文本区域。所以我做了一个构造函数占位符，看起来完全像内置占位符，也工作在其他浏览器比谷歌Chrome。它非常方便，因为你可以随时使用占位符函数，甚至不需要jQuery。

编辑:

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

2016-02-27 12:38:36

但需要注意的是，问题的前提与W3规范不一致，因此不能保证行为，解决方案使用&x10;工作时<textarea>是要在HTML中定义:

<textarea 
  placeholder="HTML entity works &#10; but unicode entity hard-coded \u000A !">
</textarea>

但是如果<textarea>是用JavaScript创建的，那么
实体将在输出中硬编码。然而，使用unicode等效的\u000A是可以的:

let myArea = document.createElement("textarea");
myArea.placeholder = "Unicode works \u000A But HTML entity hard-coded &#10; !";

2022-09-30 12:42:28

您可以做的是将文本作为值添加，它尊重换行符\n。

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

然后你可以在焦点上删除它，然后在模糊上应用它(如果为空)。就像这样

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，不干净，但做到了。

2011-09-05 22:47:45

在文本区域的占位符属性内插入换行符?

推荐文章

最新文章

标签