Span标签在返回时不将按下的Enter按钮视为新行
Span标签在返回时不将按下的Enter按钮视为新行
提问于 2022-07-04 13:20:21
我有一个自定义的span标签，它的角色是textarea，我希望在其中输入多行文本。
.input,
.textarea {
border: 1px solid #ccc;
font-family: inherit;
font-size: inherit;
padding: 5px 50px;
}
.textarea {
display: block;
width: 1000px;
overflow: hidden;
resize: none;
min-height: 200px;
line-height: 20px;
white-space: pre-wrap;
}
.textarea[contenteditable]:empty::before {
content: "Mail Body Template";
color: gray;
}<p><span id="mail_body_template" oninput="generate(this.value)" class="textarea" role="textbox" contenteditable></span></p>但是，当我打印textarea的读取值时，它似乎不会在按下Enter上创建新行，而只能通过Shift+Enter创建。
我试图在onpresskey上添加一个span侦听器，以捕获Enter并创建一个新的行，但它从未起作用。
$(document).ready(function() {
$('#mail_body_template').on('keypress',function(e) {
if(e.which == 13) {
$('#mail_body_template').val($('#mail_body_template').val() + "\r\n");
}
});
最终，我希望能够让span将Enter作为一个新行来对待，就像它对待Shift+Enter一样。
有办法吗？
回答 1
Stack Overflow用户
发布于 2022-07-04 14:28:20
contentEditable的内容是HTML。使用.val()或.value不会返回span的内容。
这不是控制台线。不能使用\r或\n强制换行。
但是，您可以插入一个<br>标记，这应该允许行中断。
为了访问这个值，您应该使用innerHTML。
您的代码缺少生成函数以进一步获取错误可能位于的位置。(在span上绑定keypress / Keydown事件也可能引发一些我们可能无法再现的奇怪行为。
function generate(myVal){
console.log("this.value : "+myVal)
console.log("jqueryVal : "+$("#mail_body_template").val());
console.log("innerHtml : "+document.getElementById("mail_body_template").innerHTML);
console.log("jqueryHtml : "+$("#mail_body_template").html());
console.log("plainText : "+$("#mail_body_template").text());
}https://jsfiddle.net/kezqs7tv/5/
下面是一个js.fiddle片段，它展示了我的意思。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72857438
复制相关文章
相似问题
腾讯云开发者
