Mat*_*eus 6 html javascript uiwebview ios
我目前有一个具有固定宽度和灵活高度的contentEditable div,必须根据用户输入的长度增加或减少.
问题是想到下面的代码,我得到的是基于最后一个char类型的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,在输入新的char后立即获取contentEditable高度,如果可能,在char被渲染之前,如下面的方案:
KEYBOARD KEY PRESSED =>
JS用新的CHAR获得内容的高度=>
CHAR现在被渲染(这只是一个模拟,当然事情不会像这样严格)
这可以做到吗？任何想法都会受到赞赏,提前谢谢!
考虑到 div 的高度在 char 出现之前不会增加，我可以向您建议我的解决方法。您可以通过拦截事件将输入的字母填充到另一个 div 中，然后获取第二个 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>
| 归档时间： |
|
| 查看次数： |
1986 次 |
| 最近记录： |