<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content {
overflow: hidden; /*内容过多的隐藏*/
white-space: nowrap; /*内容过多不换行*/
width: 200px; /*宽度*/
border-bottom: solid black 1px; /*底部边框*/
}
.check {
zoom: 200%;
vertical-align: middle;
}
</style>
<body>
<input width="200px"/>
<!--模拟input框-->
<div class="content" contenteditable="true"></div>
<span id = "tigger"
class="content"
style="
overflow:hidden;/*内容过多的隐藏*/
text-overflow:ellipsis;/*内容多标记为...*/
white-space:nowrap;/*内容过多不换行*/
display:inline-block;/*块显示*/
width:200px;/*宽度*/
border-bottom:solid black 1px;/*底部边框*/
"
contenteditable="true">
</span>
<div >
<input class="check" width="200px" type="checkbox" checked="checked"/> 我想对齐
<input class="check" width="200px" type="checkbox"/> 我想对齐
</div>
</body>
<script type="text/javascript">
/*输入法完成输入之后的监测compositionend*/
/*这个是开始事件compositionstart要用就接着on*/
document.getElementById("tigger").addEventListener('compositionend', function (e) {
var curid = window.event.srcElement.id;
var s = document.getElementById(curid).innerText;
document.getElementById(curid).innerText = "嘿嘿";
});
</script>
</html>
备忘,div ,span模拟input框,垂直居中对齐,输入法监测
最新推荐文章于 2024-05-14 06:51:29 发布