6

現在、固定幅と柔軟な高さを持つ contentEditable div があり、ユーザー入力の長さに応じて増減する必要があります。

問題は、次のコードを考えたことです。最後に入力した文字に基づいて 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 を使用して、新しい文字が入力された直後に contentEditable の高さを取得する必要があり、可能であれば、次のスキームのように文字がレンダリングされる前に取得します。

キーボードのキーが押されました =>

JS 新しい CHAR で CONTENTEDITABLEDIV の高さを取得 =>

CHAR NOW BE RENDERED (これは単なるシミュレーションであり、厳密にはこのようにはなりません)

これを行うことができますか?任意のアイデアをいただければ幸いです。

4

5 に答える 5

3

文字が表示される前にdivの高さが増加しないことを考慮して、回避策を提案できます。イベントをインターセプトすることにより、入力した文字を別の div に入力し、この 2 番目の div の高さを取得して、最後に文字を表示する場所に配置できます。これにより、入力時間が長くなります。

ここでスクリプトをテストできます

<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>
于 2013-06-03T22:22:56.830 に答える
1

レンダリング後に高さを取得できるの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/のデモ

于 2013-06-10T08:40:39.917 に答える