Javascript 如何在内容中写入文本时获得内容可编辑的div宽度？_Javascript_Html

Javascript 如何在内容中写入文本时获得内容可编辑的div宽度？

javascript html

Javascript 如何在内容中写入文本时获得内容可编辑的div宽度？,javascript,html,Javascript,Html,我正在做一个HTML和javascript的项目。我有以下代码：- <html> <head> <style type="text/css"> .mainDiv { border:1px solid black; width:500px; height:340px; left:400px; position: absolute; } .textOu

我正在做一个HTML和javascript的项目。我有以下代码：-

<html>
<head>
<style type="text/css">
    .mainDiv
    {
        border:1px solid black;
        width:500px;
        height:340px;
        left:400px;
        position: absolute;
    }

    .textOutsideDiv
    {
        border: 1px dashed black;
        position: absolute;
        display: none;
        width:20px;
        height: 20px; 
    }
    .textInsideDiv {
        position:absolute;
        display:none;
        background: none repeat scroll 0 0 transparent;
        border: medium none;
        font-family: Arial,Helvetica;
        line-height: 1em;
        margin: 0;
        min-height: 1em;
        min-width: 1px;
        outline: medium none;
        padding: 2px;
        position: relative;
        white-space: nowrap;
        z-index: 2;
    }
</style>
<script type="text/javascript">
    function makeTextCanvas(e)
    {
        var mouseX=e.pageX-401;
        var mouseY=e.pageY-9;
        var existOrNot=document.getElementById('textOutsideDiv').style.display;

        if(existOrNot=="" || existOrNot=="none")
        {   
            var outerContainer=document.getElementById('textOutsideDiv');
            var innerContainer=document.getElementById('textInsideDiv');

            outerContainer.style.display='block';
            outerContainer.style.left=mouseX+'px';
            outerContainer.style.top=mouseY+'px';

            innerContainer.style.display='block';
        }

    }
    function makeDiv()
    {
        //alert("Write Inside");
            var outerContainer=document.getElementById('textOutsideDiv');
            var innerContainer=document.getElementById('textInsideDiv');

            var h=innerContainer.offsetHeight;
            outerContainer.style.height=h+'px';

    }
</script>
</head>
<body>
<div id="mainDiv" class="mainDiv" onclick="makeTextCanvas(event);">
    <div id="textOutsideDiv" class="textOutsideDiv">
        <div id="textInsideDiv" class="textInsideDiv" contenteditable="true" onkeyup="makeDiv();" style="font-size: 1em; color: rgb(0, 170, 0);"></div>
    </div>
</div>
</body>
</html>


梅因迪夫先生
{
边框：1px纯黑；
宽度：500px；
高度：340px；
左：400px；
位置：绝对位置；
}
.textOutsideDiv
{
边框：1px黑色虚线；
位置：绝对位置；
显示：无；
宽度：20px；
高度：20px；
}
.textinidediv{
位置：绝对位置；
显示：无；
背景：无重复滚动0 0透明；
边界：中等无；
字体系列：Arial，Helvetica；
线高：1米；
保证金：0；
最小高度：1米；
最小宽度：1px；
大纲：中无；
填充：2px；
位置：相对位置；
空白：nowrap；
z指数：2；
}
函数makeTextCanvas（e）
{
var mouseX=e.pageX-401；
var mouseY=e.pageY-9；
var existOrNot=document.getElementById（'textOutsideDiv'）.style.display；
如果（existOrNot==“”| | existOrNot==“无”）
{   
var outerContainer=document.getElementById（'textOutsideDiv'）；
var innerContainer=document.getElementById（'textInsideDiv'）；
outerContainer.style.display='block'；
outerContainer.style.left=mouseX+'px'；
outerContainer.style.top=mouseY+'px'；
innerContainer.style.display='block'；
}
}
函数makeDiv（）
{
//警告（“写在里面”）；
var outerContainer=document.getElementById（'textOutsideDiv'）；
var innerContainer=document.getElementById（'textInsideDiv'）；
var h=innerContainer.offsetHeight；
outerContainer.style.height=h+'px'；
}

在更改div内部的内容时，我增加了outerContainer div的高度，但在获取内容可编辑div的宽度时遇到了一个问题。我如何解决这个问题？

首先，您说要获取内部

div的宽度，但实际上您正在尝试获取innerContainer.offsetHeight
。其次，将文本添加到其宽度设置为“自动”的元素中，如果其父元素具有固定的宽度，则不会拉伸该元素
如果我正确理解了您试图实现的目标，那么您希望在用户键入时展开伪文本框。下面是如何扩展的：，但是应该有一种更好的方法来获取文本的宽度，因为非单空格字体有不同宽度的字母。
感谢您的帮助。但是我怎样才能使这种div免于拼写检查呢。因为拼写检查=='false'不适用于contenteditable='true'div。