Javascript 内容可编辑单行输入

对于我们在我工作的公司开发的应用程序，我们需要一个支持在基于JS的web应用程序中插入表情符号的输入。我们目前正在使用带有表情符号短代码（即“：-”）的输入，并希望切换到插入实际的图形图像

我们最初的计划是使用可编辑的

内容。我们正在为粘贴事件以及不同的键/鼠标交互使用侦听器，以确保没有不需要的标记进入contenteditable（我们将文本从其容器标记中剥离，只保留我们自己插入的图像标记）

然而，现在的问题是，如果您输入足够的内容（即其高度增加），div将调整大小。我们不希望发生这种情况，也不允许只隐藏文本（即纯
overflow:hidden
）。因此：

有没有办法使contenteditable div像单行输入一样工作？

如果有一个我错过的相对简单的属性/css属性可以实现我想要的功能，我会非常喜欢，但是如果需要css+JS建议，我也会非常感激。
您可以用文本输入替换这个div（在调用onclick事件之后）。

我使用了类似的东西，效果很好。
我想您正在寻找一个
内容可编辑的
div
，当它溢出
div时，只有一行文本可以水平滚动。这应该可以做到：


div{
字体系列：Arial；
字号：18px；
最小高度：40px；
宽度：300px；
边框：1px纯红；
溢出：隐藏；
空白：nowrap；
}

佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。
因此，对于后代来说：最简单的解决方案是让您的产品经理更改需求，这样您就可以进行多行编辑。这就是我们这个案子的结局

然而，在这之前，我在创建手动移动的单行richtext编辑器方面做了很多工作。最后我把它包装在一个jQuery插件中。我没有时间来完成它（IE中可能有bug，Firefox工作得最好，Chrome工作得很好——评论很少，有时不太清楚）。它使用部分（因为我不想依赖完整的库而提取）来获取选择的屏幕位置，以便测试鼠标位置与选择（因此您可以拖动选择并移动框）

大致上，它使用3个元素。一个外部div（你称之为插件的东西），它会溢出：隐藏，然后在里面嵌套两层。第一层是绝对定位的，第二层是实际的可编辑内容。这种分离是必要的，因为否则一些浏览器会给contenteditable绝对定位元素夹点，让用户移动它

在任何情况下，都会有一大堆代码将绝对定位的元素移动到顶部元素中，从而移动实际的内容。contenteditable本身具有空白nowrap等，以强制其保持单行

插件中还有一些代码，可以从粘贴/拖动到框中的任何文本中去除任何非图像的内容（如
br
、表格等）。您需要这部分内容（如brs、剥离/规范化段落等），但通常您可能希望保留链接、
em
、
strong
和/或其他格式

来源：
使用jQuery，我设置了一个.keypress事件，然后测试e.keyCode==13（返回键），如果事件返回false，则编辑无法生成多行

$('*[contenteditable=yes]').keypress(function(e) {
  if(e.keyCode == 13 && !$(this).data('multiline')) {
    return false;
  }
})

看看我刚刚发布的答案。这将帮助您：


以下是HTML标记：

<span contenteditable="false"></span>

希望这对别人有帮助
 这里有一个相对简单的解决方案，它使用contenteditable的输入事件来扫描dom并过滤掉各种风格的新行（因此它应该对复制/粘贴、拖放、键盘上的回车键等具有鲁棒性）。它将多个TextNodes压缩为单个TextNodes，从TextNodes中剥离换行符，终止BRs，并在其接触的任何其他元素上放置“display:inline”。在铬合金上测试，在其他任何地方都不能保证


var-editable=$（“#editable”）
可编辑的.on（'input'，function（）{
返回过滤器新行（可编辑）；
});
函数过滤器\u换行符（div）{
var节点、上一个、下一个、下一个、下一个、下一个、下一个结果；
prev=null；
_ref=分区内容（）；
_结果=[]；
对于（_i=0，_len=_ref.length；_i<_len；_i++）{
节点=_ref[_i]；
if（node.nodeType==3）{
node.nodeValue=node.nodeValue.replace（'\n'，''）；
如果（上一个）{
node.nodeValue=prev.nodeValue+node.nodeValue；
$（上一个）.remove（）；
}
_结果：推送（prev=节点）；
}else if（node.tagName.toLowerCase（）=='br'）{
_结果.推送（$（节点）.remove（））；
}否则{
$（node.css（'display'，'inline'）；
过滤新行（$（节点））；
_结果：推送（prev=null）；
}
}
返回结果；
}
#可编辑{
宽度：200px；
高度：20px；
边框：1px纯黑；
}

[contenteditable=“true”]。单行{
空白：nowrap；
宽度：200px；
溢出：隐藏；
} 
[contenteditable=“true”]。单行br{
显示：无；
}
[contenteditable=“true”]。单行*{
显示：内联；
空白：nowrap；
}

这应该行得通。
​如果您想要一种不同的解决方法，而不是改变需求，只需一点
display:table
就完全可能=）


.container1{
高度：20px；
宽度：273px；
溢出：隐藏；
边框：1px纯绿色；
}
C
$(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();
    }
}