备忘，div ,span模拟input框,垂直居中对齐,输入法监测

最新推荐文章于 2022-11-06 16:12:07 发布

王家羽翼-王羽

最新推荐文章于 2022-11-06 16:12:07 发布

阅读量369

点赞数

分类专栏：记录文章标签： javascript css3 css

本文链接：https://blog.csdn.net/SpandKing/article/details/122437358

版权

记录专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>

王家羽翼-王羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
备忘，div ,span模拟input框,垂直居中对齐,输入法监测

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .content { overflow: hidden; /*内容过多的隐藏*/ white-space: nowrap; /*内容过
复制链接

扫一扫