Menu
I currently have a contentEditable div with a fixed width and a flexible height,that must be increased or decreased according to the length of the user input.
The problem is that thought the following code,i'm getting the height of the contentEditable based on the last char typed,this is my code:
<!-- 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>
So,i need through JAVASCRIPT,get the contentEditable height instantly after when a new char is typed,and if possible before the char become rendered,like the scheme bellow:
KEYBOARD KEY PRESSED =>
JS GET THE HEIGHT OF THE CONTENTEDITABLEDIV WITH THE NEW CHAR =>
CHAR NOW BE RENDERED(This is just an simulation of course things won't get strictly like this)
This can be done?Any ideas would be appreciated,thanks in advance!
838
Considering that the height of the div won't increase before that the char appear, I can suggest you my workaround. You can fill with the typed letters another div by intercepting the event, then get the hight of this second div and finally, you can place the letter where it should be appear. This increase the input time.
You can test the script here
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With