Question

我在HTML中有一个contenteditable元素。我发现在互联网上没有关于清除由于用户按 Enter 而插入的<div>和</br>等html标记中的div内容的问题（new线）。

换句话说，如果用户按 Enter ，用户输入将使用额外的html标记发布到数据库。

这个问题最干净的解决办法是什么？

_{如果问题重复，我很抱歉，但我没有找到其他地方描述的问题}

＆＃13;

$(function() {
  $('button').click(function() {
    alert($('#test').html());
  });
});

＆＃13;

#test {
  line-height: 1.14;
  border: solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='test' contenteditable='true'></div>
<button>Show me div input</button>

＆＃13;

Answer 1

.html()正在完成其所说的内容，获取所有文本以及任何html，例如<br>标记。你真正想要的是.text()。

＆＃13;

$(function() {
  $('button').click(function() {
    alert($('#test').text());
  });
});

＆＃13;

#test {
  line-height: 1.14;
  border: solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='test' contenteditable='true'></div>
<button>Show me div input</button>

＆＃13;

Answer 2

.html()方法将换行符作为<br>元素返回。

您可以改用.text()方法。但是，它会完全删除换行符。

如果您想维护换行符，请使用innerText属性：

$(function() {
  $('button').click(function() {
    alert($('#test').prop('innerText'));
  });
});

#test {
  line-height: 1.14;
  border: solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='test' contenteditable='true'></div>
<button>Show me div input</button>

从＆＃39; <br/>＆＃39;清除可疑的div。

2 个答案: