我们公司正在开发的应用程序需要一个支持在基于JavaScript的Web应用程序中插入表情符号的输入框。目前，我们正在使用带有表情符号短代码（例如“:-)”）的输入框，并希望切换为插入实际的图像。
我们最初的计划是使用contenteditable<div>。我们使用侦听器来监听粘贴事件以及不同的键盘/鼠标交互，以确保没有不想要的标记进入contenteditable（我们从其容器标记中剥离文本，并仅保留我们自己插入的图像标记）。
然而，问题在于如果您放入足够的内容，div会调整大小（即其高度增加）。我们不希望发生这种情况，也不能接受文本被隐藏（即纯粹的overflow: hidden）。所以：
是否有办法使可编辑的div行为类似于单行输入框？
如果有一个相对简单的属性/CSS属性可以做到我想要的效果，那将是最好的，但如果必要的话，CSS+JS建议也将不胜感激。
[contenteditable="true"].single-line {
white-space: nowrap;
width:200px;
overflow: hidden;
}
[contenteditable="true"].single-line br {
display:none;
}
[contenteditable="true"].single-line * {
display:inline;
white-space:nowrap;
}<div contenteditable="true" class="single-line">
This should work.
</div>document.querySelectorAll('.CETextInput').forEach(el => {
//Focusing on child element after clicking parent. We need it because parent element has bigger width than child.
el.parentNode.addEventListener('mousedown', function(e) {
if (e.target === this) {
setTimeout(() => this.children[0].focus(), 0);
}
});
//Prevent Enter. See purpose in "Step 2" in answer.
el.parentNode.addEventListener('keydown', function(e) {
if (e.keyCode === 13)
e.preventDefault();
});
});.CETextInputBorder { /*This element is needed to prevent cursor: text on border*/
display: inline-block;
border: 1px solid #aaa;
}
.CETextInputCont {
overflow: hidden;
cursor: text; /*You must set it because parent elements is bigger then child contenteditable element. Also you must add javascript to focus child element on click parent*/
/*Style:*/
width: 10em;
height: 1em;
line-height: 1em;
padding: 5px;
font-size: 20px;
font-family: sans-serif;
}
.CETextInput {
white-space: pre; /*"pre" is like "nowrap" but displays all spaces correctly (with "nowrap" last space is not displayed in Firefox, tested on Firefox 66, 2019-05-15)*/
overflow-x: auto;
min-height: 100%; /*to prevent zero-height with no text*/
/*We will duplicate vertical padding to let user click contenteditable element on top and bottom. We would do same thing for horizontal padding but it is not working properly (in all browsers when scroll is in middle position and in Firefox when scroll is at the end). You can also replace vertical padding with just bigger line height.*/
padding: 5px 0;
margin-top: -5px;
outline: none; /*Prevent border on focus in some browsers*/
}<div class="CETextInputBorder">
<div class="CETextInputCont">
<div class="CETextInput" contenteditable></div>
</div>
</div>此外，用户或扩展程序可能会粘贴以下内容，导致问题：
但是，建议隐藏所有 <br>也是错误的。因为Mozilla Firefox会向空字段添加<br>元素（我猜这可能是在删除最后一个字符后文本光标消失的错误的解决方法；在2019-03-19发布的Firefox 66中检查）。如果隐藏此元素，则当用户将焦点移动到字段时，光标将设置在此隐藏的<br>元素中，并且文本光标也将始终隐藏。
如果您知道字段为空，则可以通过JavaScript修复此问题。您需要在此处使用一些javascript（您不能使用:empty选择器，因为该字段包含<br>元素而不是空白）。以下是解决方案示例：
document.querySelectorAll('.CETextInput').forEach(el => {
//OLD CODE:
//Focusing on child element after clicking parent. We need it because parent element has bigger width than child.
el.parentNode.addEventListener('mousedown', function(e) {
if (e.target === this) {
setTimeout(() => this.children[0].focus(), 0);
}
});
//Prevent Enter to prevent blur on Enter
el.parentNode.addEventListener('keydown', function(e) {
if (e.keyCode === 13)
e.preventDefault();
});
//NEW CODE:
//Update "empty" class on all "CETextInput" elements:
updateEmpty.call(el); //init
el.addEventListener('input', updateEmpty);
function updateEmpty(e) {
const s = this.innerText.replace(/[\r\n]+/g, ''); //You must use this replace, see explanation below in "Step 3"
this.classList.toggle('empty', !s);
}
});/*OLD CODE:*/
.CETextInputBorder { /*This element is needed to prevent cursor: text on border*/
display: inline-block;
border: 1px solid #aaa;
}
.CETextInputCont {
overflow: hidden;
cursor: text; /*You must set it because parent elements is bigger then child contenteditable element. Also you must add javascript to focus child element on click parent*/
/*Style:*/
width: 10em;
height: 1em;
line-height: 1em;
padding: 5px;
font-size: 20px;
font-family: sans-serif;
}
.CETextInput {
white-space: pre; /*"pre" is like "nowrap" but displays all spaces correctly (with "nowrap" last space is not displayed in Firefox, tested on Firefox 66, 2019-05-15)*/
overflow-x: auto;
min-height: 100%; /*to prevent zero-height with no text*/
/*We will duplicate vertical padding to let user click contenteditable element on top and bottom. We would do same thing for horizontal padding but it is not working properly (in all browsers when scroll is in middle position and in Firefox when scroll is at the end). You can also replace vertical padding with just bigger line height.*/
padding: 5px 0;
margin-top: -5px;
outline: none; /*Prevent border on focus in some browsers*/
}
/*NEW CODE:*/
.CETextInput:not(.empty) br,
.CETextInput img { /*We hide <img> here. If you need images do not hide them but set maximum height. User can paste image by pressing Ctrl+V or Ctrl+Insert.*/
display: none;
}
.CETextInput * {
display: inline;
white-space: pre;
}<!--OLD CODE:-->
<div class="CETextInputBorder">
<div class="CETextInputCont">
<div class="CETextInput" contenteditable></div>
</div>
</div>我们隐藏了<br>元素，因此“innerText”值将不包含它们。但是：
因此，在获取值时，应进行替换以避免意外获取换行符：
s = s.replace(/[\r\n]+/g, '');
你可以通过 JavaScript 删除 <br> 以解决问题，但这是一个很糟糕的解决方案，因为在每次删除后，用户都无法再使用“撤消”操作来取消之前所做的更改。
你也可以使用 document.execCommand('delete') 来删除 <br>，但这很难实现 + 用户可以撤消您的删除并恢复 <br> 元素。
虽然这个问题并没有被提出，但我想许多使用单行 contenteditable 元素的人都需要它。以下是使用 CSS 和上述的“empty”类的示例：
//OLD CODE:
document.querySelectorAll('.CETextInput').forEach(el => {
//Focusing on child element after clicking parent. We need it because parent element has bigger width than child.
el.parentNode.addEventListener('mousedown', function(e) {
if (e.target === this) {
setTimeout(() => this.children[0].focus(), 0);
}
});
//Prevent Enter to prevent blur on Enter
el.parentNode.addEventListener('keydown', function(e) {
if (e.keyCode === 13)
e.preventDefault();
});
//Update "empty" class on all "CETextInput" elements:
updateEmpty.call(el); //init
el.addEventListener('input', updateEmpty);
function updateEmpty(e) {
const s = this.innerText.replace(/[\r\n]+/g, ''); //You must use this replace, see explanation below in "Step 3"
this.classList.toggle('empty', !s);
//NEW CODE:
//Make element always have <br>. See description in html. I guess it is not needed because only Firefox has bug with bad cursor position but Firefox always adds this element by itself except on init. But on init we are adding it by ourselves (see html).
if (!s && !Array.prototype.filter.call(this.children, el => el.nodeName === 'BR').length)
this.appendChild(document.createElement('br'));
}
});/*OLD CODE:*/
.CETextInputBorder { /*This element is needed to prevent cursor: text on border*/
display: inline-block;
border: 1px solid #aaa;
}
.CETextInputCont {
overflow: hidden;
cursor: text; /*You must set it because parent elements is bigger then child contenteditable element. Also you must add javascript to focus child element on click parent*/
/*Style:*/
width: 10em;
height: 1em;
line-height: 1em;
padding: 5px;
font-size: 20px;
font-family: sans-serif;
}
.CETextInput {
white-space: pre; /*"pre" is like "nowrap" but displays all spaces correctly (with "nowrap" last space is not displayed in Firefox, tested on Firefox 66, 2019-05-15)*/
overflow-x: auto;
min-height: 100%; /*to prevent zero-height with no text*/
/*We will duplicate vertical padding to let user click contenteditable element on top and bottom. We would do same thing for horizontal padding but it is not working properly (in all browsers when scroll is in middle position and in Firefox when scroll is at the end). You can also replace vertical padding with just bigger line height.*/
padding: 5px 0;
margin-top: -5px;
outline: none; /*Prevent border on focus in some browsers*/
}
.CETextInput:not(.empty) br,
.CETextInput img { /*We hide <img> here. If you need images do not hide them but set maximum height. User can paste image by pressing Ctrl+V or Ctrl+Insert.*/
display: none;
}
.CETextInput * {
display: inline;
white-space: pre;
}
/*NEW CODE:*/
.CETextInput[placeholder].empty::before { /*Use ::before not ::after or you will have problems width first <br>*/
content: attr(placeholder);
display: inline-block;
width: 0;
white-space: nowrap;
pointer-events: none;
cursor: text;
color: #b7b7b7;
padding-top: 8px;
margin-top: -8px;
}<!--OLD CODE:-->
<div class="CETextInputBorder">
<div class="CETextInputCont">
<div class="CETextInput" placeholder="Type something here" contenteditable><br></div>
</div>
</div>
<!--We manually added <br> element for Firefox browser because Firefox (tested on 2019-05-11, Firefox 66) has bug with bad text cursor position in empty contenteditable elements that have ::before or ::after pseudo-elements.-->您还可以通过设置 "overflow-x: auto"、"overflow-y: hidden" 和 "scrollbar-width: none" 来仅使用一个 div。但是，"scrollbar-width" 是一种新属性，目前仅在 Firefox 64+ 中起作用，其他浏览器尚未支持。
您还可以添加以下内容：
我不建议使用这种解决方案，但这里有一个示例：
//OLD CODE:
document.querySelectorAll('.CETextInput').forEach(el => {
//Focusing on child is not needed anymore
//Prevent Enter to prevent blur on Enter
el.addEventListener('keydown', function(e) {
if (e.keyCode === 13)
e.preventDefault();
});
//Update "empty" class on all "CETextInput" elements:
updateEmpty.call(el); //init
el.addEventListener('input', updateEmpty);
function updateEmpty(e) {
const s = this.innerText.replace(/[\r\n]+/g, ''); //You must use this replace, see explanation below in "Step 3"
this.classList.toggle('empty', !s);
}
});/*NEW CODE:*/
.CETextInput {
white-space: pre; /*"pre" is like "nowrap" but displays all spaces correctly (with "nowrap" last space is not displayed in Firefox, tested on Firefox 66, 2019-05-15)*/
overflow-x: auto; /*or "scroll"*/
overflow-y: hidden;
-webkit-scrollbar-width: none; /*Chrome 4+ (probably), webkit based*/
scrollbar-width: none; /*FF 64+, Chrome ??+, webkit based, Edge ??+*/
-ms-overflow-style: none; /*IE ??*/
/*Style:*/
width: 10em;
height: 1em;
line-height: 1em;
padding: 5px;
border: 1px solid #aaa;
font-size: 20px;
font-family: sans-serif;
}
.CETextInput::-webkit-scrollbar {
display: none; /*Chrome ??, webkit based*/
}
/*OLD CODE:*/
.CETextInput:not(.empty) br,
.CETextInput img { /*We hide <img> here. If you need images do not hide them but set maximum height. User can paste image by pressing Ctrl+V or Ctrl+Insert.*/
display: none;
}
.CETextInput * {
display: inline;
white-space: pre;
}<!--NEW CODE:-->
<div class="CETextInput" contenteditable></div>这个解决方案的3个问题与填充有关：
要解决这些问题，您需要使用3个元素，就像我们以前使用的那样，但在这种情况下，您不需要使用scrollbar-width。我们使用3个元素的解决方案没有这些问题。
我认为你正在寻找一个具有contenteditable属性的div，且只有一行文本，在文本超出div范围时可以水平滚动。这个方法应该可以解决问题：http://jsfiddle.net/F6C9T/1
div {
font-family: Arial;
font-size: 18px;
min-height: 40px;
width: 300px;
border: 1px solid red;
overflow: hidden;
white-space: nowrap;
}<div contenteditable>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>min-height: 40px 包括水平滚动条出现时的高度。当水平滚动条出现时，min-height:20px 会自动扩展，但在IE7中无效（尽管您可以使用条件注释应用单独的样式）。
contenteditable``div的最终目标，允许内容滚动。 - tw16overflow-x:hidden;，然后它将随着光标滚动文本，而不显示滚动条。 - BurningLights我改编了@tw16于2019年12月5日接受的解决方案，以添加滚动功能。关键是使用overflow-x: auto添加滚动条，然后隐藏滚动条 (https://dev59.com/j2Qn5IYBdhLWcg3wpYj0#49278385)
/* Existing Solution */
[contenteditable="true"].single-line {
white-space: nowrap;
width: 200px;
overflow: hidden;
}
[contenteditable="true"].single-line br {
display:none;
}
[contenteditable="true"].single-line * {
display:inline;
white-space:nowrap;
}
/* Make Scrollable */
[contenteditable="true"].single-line {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
[contenteditable="true"].single-line::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
} <div contenteditable="true" class="single-line">
This should scroll when you have really long text!
</div>以下是一个相对简单的解决方案，它使用contenteditable的input事件来扫描dom并过滤出各种换行符号（因此它应该可以抵御复制/粘贴、拖放、键盘输入等操作）。 它将多个TextNodes压缩到单个TextNodes中，从TextNodes中删除换行符，消除BR元素，并在其触及的任何其他元素上放置“display：inline”。 在Chrome上测试，其他地方没有保证。
var editable = $('#editable')
editable.on('input', function() {
return filter_newlines(editable);
});
function filter_newlines(div) {
var node, prev, _i, _len, _ref, _results;
prev = null;
_ref = div.contents();
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
node = _ref[_i];
if (node.nodeType === 3) {
node.nodeValue = node.nodeValue.replace('\n', '');
if (prev) {
node.nodeValue = prev.nodeValue + node.nodeValue;
$(prev).remove();
}
_results.push(prev = node);
} else if (node.tagName.toLowerCase() === 'br') {
_results.push($(node).remove());
} else {
$(node).css('display', 'inline');
filter_newlines($(node));
_results.push(prev = null);
}
}
return _results;
}#editable {
width: 200px;
height: 20px;
border: 1px solid black;
}<div id="editable" contenteditable="true"></div>这里有一个 jsfiddle 的链接可以查看：http://jsfiddle.net/tG9Qa/
input事件在contenteditable上并不被所有浏览器普遍支持。IE和Opera根本不支持它，而Firefox自14版本才开始支持它。 - Tim Downdisplay:table 就可以完全实现 =)
.container1 {
height:20px;
width:273px;
overflow:hidden;
border:1px solid green;
}
.container2 {
display:table;
}
.textarea {
width:273px;
font-size: 18px;
font-weight: normal;
line-height: 18px;
outline: none;
display: table-cell;
position: relative;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
word-wrap: break-word;
overflow:hidden;
}<div class="container1">
<div class="container2">
<div contenteditable="true" class="textarea"></div>
</div>
</div>因此，为了后代：最简单的解决方案是让您的产品经理更改要求，以便您可以进行多行编辑。这就是我们的情况最终发生的事情。
然而，在这之前，我最终创建了一个手动移动单行富文本编辑器。最后我将其封装在jQuery插件中。我没有时间完成它（在IE中可能会有错误，Firefox效果最佳，Chrome效果相当不错-注释很少且有时不太清楚）。 它使用 Rangy library的部分（提取出来是因为我不想依赖于完整的库）来获取所选内容的屏幕位置，以便测试鼠标位置与所选内容的区别（这样您就可以拖动选择并移动框）。
大致上，它通过使用3个元素来工作。外部div（您在插件上调用的东西），该元素获得overflow: hidden，然后内部有两个嵌套级别。第一级是绝对定位，第二级是实际的contenteditable。这种分离是必要的，否则某些浏览器将给contenteditable绝对定位元素 grippies，以让用户将其移动...
无论如何，然后有一堆代码来移动绝对定位的元素在顶部元素内部，从而移动实际的contenteditable。 contenteditable本身具有white-space nowrap等等，以强制它保持单行。看看我刚刚发布的答案。这应该会帮助你：
如何创建一个HTML5单行contentEditable选项卡，它监听Enter和Esc键
这是HTML标记：
<span contenteditable="false"></span>
这是jQuery/javascript代码：
$(document).ready(function() {
$('[contenteditable]').dblclick(function() {
$(this).attr('contenteditable', 'true');
clearSelection();
$(this).trigger('focus');
});
$('[contenteditable]').live('focus', function() {
before = $(this).text();
if($(this).attr('contenteditable') == "true") { $(this).css('border', '1px solid #ffd646'); }
//}).live('paste', function() {
}).live('blur', function() {
$(this).attr('contenteditable', 'false');
$(this).css('border', '1px solid #fafafa');
$(this).text($(this).text().replace(/(\r\n|\n|\r)/gm,""));
if (before != $(this).text()) { $(this).trigger('change'); }
}).live('keyup', function(event) {
// ESC=27, Enter=13
if (event.which == 27) {
$(this).text(before);
$(this).trigger('blur');
} else if (event.which == 13) {
$(this).trigger('blur');
}
});
$('[contenteditable]').live('change', function() {
var $thisText = $(this).text();
//Do something with the new value.
});
});
function clearSelection() {
if ( document.selection ) {
document.selection.empty();
} else if ( window.getSelection ) {
window.getSelection().removeAllRanges();
}
}
你可以在调用onclick事件后，将此div替换为文本输入框。
我之前使用了类似这个插件的东西，它工作得很好。
$('*[contenteditable=yes]').keypress(function(e) {
if(e.keyCode == 13 && !$(this).data('multiline')) {
return false;
}
})
contenteditable 属性的值只能是 true、false、inherit 或空字符串，而不是 yes。我还怀疑（但没有检查过）抑制回车键事件不能保证在各种浏览器中都有效，可能需要改用 keydown 和/或 keyup。 - Gijs