0

我正在开发一个 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 的宽度时遇到了问题。我怎么解决这个问题？

4

1 回答 1

0

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

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

于 2012-10-31T14:09:33.083 回答