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。第 2 に、幅が auto に設定されている要素にテキストを追加しても、親要素の幅が固定されている場合、テキストは引き伸ばされません。

あなたが達成しようとしていることを正しく理解していれば、ユーザーが入力している間に疑似テキストボックスを展開したいと思うでしょう。これを拡張する方法は次のとおりです: http://jsfiddle.net/LwCWM/1/、ただし、非等幅フォントにはさまざまな幅の文字があるため、テキストの幅を取得するより良い方法があるはずです。

于 2012-10-31T14:09:33.083 に答える