Question

我正在开发一个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>

在更改div内的内容时，我正在增加outerContainer div的高度，但我在获取Content Editable div的宽度方面遇到了问题。我该如何解决这个问题？

Answer 1

首先，你说你想获得内部div的宽度，但实际上你是想获得innerContainer.offsetHeight。其次，如果文本的父元素具有固定的宽度，则将文本添加到宽度设置为auto的元素不会拉伸它。

如果我正确理解了您要实现的目标，则需要在用户输入时扩展伪文本框。以下是扩展它的方法：http://jsfiddle.net/LwCWM/1/，但是应该有更好的方法来获取文本的宽度，因为非等宽字体具有各种宽度的字母。

如何在其中编写文本时获取内容可编辑div宽度？

1 个答案: