Question

我目前有一个具有固定宽度和灵活高度的contentEditable div，必须根据用户输入的长度增加或减少。

问题是想到下面的代码，我根据最后输入的char得到了contentEditable的高度，这是我的代码：

<!-- THE JS FUNCTION THE GETS THE DIV CALLED title HEIGHT-->
function setInTitle() {

        var titleHeight = document.getElementById('title').offsetHeight;

}

<!-- THE DIV CALLED title -->
<div
     id="title"
     class="title"
     contenteditable="true"
     style="font-family: Helvetica; font-size:18px; font-weight:bold; background-color:#fff; color:#000; -webkit-tap-highlight-color:rgba(0,0,0,0); margin:14px;"
     autocapitalization="off"
     autocorrection="off"
     autocomplete="off"
     onKeyPress="setInTitle();" <==CALL THE JS FUNCTION
></div>

所以，我需要通过JAVASCRIPT，在输入新的char后立即获取contentEditable高度，如果可能，在char被渲染之前，如下所示的方案：

KEYBOARD KEY PRESSED =＆gt;

JS使用新CHAR获取内容的高度=＆gt;

CHAR现在被渲染（这只是一个模拟当然事情不会严格像这样）

这可以做到吗？任何想法都会受到赞赏，提前谢谢！

Answer 1

考虑到在出现char之前div的高度不会增加，我可以建议你我的解决方法。您可以通过截取事件来填充键入的字母另一个div，然后获得第二个div的高度，最后，您可以将字母放在应该出现的位置。这增加了输入时间。

您可以测试脚本here

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">

#title {
    border: 1px #3399FF solid;
    min-height:50px;
    width:100px;
    word-wrap:break-word;
}
#title2 {
    filter:alpha(opacity=20);
    opacity:0.2;
    border: 1px #3399FF solid;
    min-height:50px;
    width:100px;
    word-wrap:break-word;
}
</style>
</head>
<body>

<!-- THE DIV CALLED title -->
<div
     id="title"
     class="title"
     contenteditable="true"
     style="font-family: Helvetica; font-size:18px; font-weight:bold; background-color:#fff; color:#000; -webkit-tap-highlight-color:rgba(0,0,0,0); margin:14px;"
     autocapitalization="off"
     autocorrection="off"
     autocomplete="off"
></div>
<div
     id="title2"
     class="title"
     contenteditable="true"
     style="font-family: Helvetica; font-size:18px; font-weight:bold; background-color:#fff; color:#000; -webkit-tap-highlight-color:rgba(0,0,0,0); margin:14px;"
     autocapitalization="off"
     autocorrection="off"
     autocomplete="off"
></div>
<div id="a"></div>
</body>
<script>

var slowl = 400 //updating time
var lastts = "";//last timestamp value
$("#title").on('keydown keyup change keypress', function(e) {//catch the event
    e.preventDefault();//stop the event
    if(e.timeStamp-lastts < slowl){//try prevent keypress abuse
        return false;
    }
    lastts = e.timeStamp;
    var html=$('#title').text();
    console.log(e);
    if(e.charCode!=0){//all browsers
        char = e.charCode;
    }else{
        char = e.keyCode;
    }
    content = $('#title').text()+String.fromCharCode(char); //prepare content
    $('#title2').text(content);
    var height = $('#title').height();
    $('#a').html(height);
    setTimeout("$('#title').text($('#title2').text());",slowl);//normalize the sitation

});
</script>
</html>

Answer 2

如果您将事件处理程序附加到keyup而不是keydown，则可以在渲染后获取高度。在渲染之前，您无法获得渲染后的高度。你要求的原因是什么？

JS

var output = document.getElementById('output'); var title = document.getElementById('title'); title.addEventListener("keyup", function (e) { output.innerHTML = title.offsetHeight; }); //initialize output.innerHTML = title.offsetHeight;

HTML

<div>Height of #title is: <span id="output">...</span>px</div> <div id="title" class="title" contenteditable="true" autocapitalization="off" autocorrection="off" autocomplete="off" >type here</div>

这是你追求的吗？在http://jsfiddle.net/jksCt/
进行演示

Answer 3

如果你保持可见性怎么办：隐藏的DIV复制具有相同固定宽度的可见文本。然后，您可以将事件附加到可见DIV的onKeyDown事件，将该字符插入隐藏的DIV，获取隐藏DIV的新高度，然后在注册onKeyUp事件之前将新高度更新到可见DIV上。 / p>

Answer 4

您可以使用带有0延迟的setTimeout几乎立即检索高度：

<div
     id="title"
     class="title"
     contenteditable="true"
     autocapitalization="off"
     autocorrection="off"
     autocomplete="off"
     onkeypress="setTimeout(function() { var height = document.getElementById('title').offsetHeight; console.log(height); }, 0)"
>type here</div>

尽管如此，这仍然是在渲染之后完成的，但几乎是即刻的。在渲染之前执行此操作的唯一方法是使用隐藏元素复制您需要测量的元素的所有样式和内容。

编辑：

我会纠正自己。您不需要额外的元素来测量高度。您可以将按下的字符插入同一元素，测量它然后删除该字符。棘手的部分是你需要考虑插入位置和当前选择，既要插入字符又要在测量元素后恢复选择。另请注意，按键不一定会附加字符。如果有选择，它将覆盖它，删除内容。您还需要处理剪贴板事件等。

我在这里建议的解决方案无法处理使用鼠标编辑内容的情况（例如，从上下文菜单中剪切/复制/粘贴）。我建议你研究HTML5输入事件，这可能是一个更好的选择。

Answer 5

您可以使用已经解决此问题的编辑器。

goog.Editor.SeamlessField解决了跨浏览器：

http://closure-library.googlecode.com/git/closure/goog/demos/editor/seamlessfield.html

以下是一起构建它的说明：

http://b9dev.blogspot.com/2013/06/getting-started-with-google-closure-on.html

或者对于懒惰，你可以使用我最终得到的构建：

http://brass9.com/downloads/editor.min.js

您可以使用它：

// Work with a tag with id=editor
var editor = new Editor('editor');

// Make contentEditable
editor.makeEditable();

// Get the HTML contents of the tag
editor.getCleanContents();

键入新char后获取contentEditable div height

5 个答案:

JS

HTML