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

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

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

当前回答

如果你在ASP中使用Razor。NET项目，你可以做下面的事情，这对很长的占位符值很有帮助:

@{ 
    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>

2021-06-23 21:31:02

其他回答

如果你在ASP中使用Razor。NET项目，你可以做下面的事情，这对很长的占位符值很有帮助:

@{ 
    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>

2021-06-23 21:31:02

你不能用纯HTML做到这一点，但这个jQuery插件可以让你:https://github.com/bradjasper/jQuery-Placeholder-Newlines

2012-09-13 15:56:00

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

您将获得在所有浏览器(包括Firefox)中都可用的多行占位符这是可以自定义占位符，因为你想要

演示小提琴。

$(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>  <div id="placeholderDiv">Multiline textarea<br> placeholder<br> <br> that works in Firefox</div> </div>

2015-10-15 22:22:29

这个问题可以通过使用占位符显示的选择器和超级强加的背景来解决，如果你的实现允许:

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

2020-05-21 05:52:34

只添加&#10用于断行，不需要编写任何CSS或javascript。

textarea { 宽度:300 px; 身高:100 px; ｝ <textarea占位符='这是一行这&#10应该是一个新行'></textarea> <textarea placeholder='这是一行这应该是一条新线吗?" > < / >文本区域

2019-08-13 13:58:00

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

推荐文章

最新文章

标签