即时通讯原生js实现表情输入（就是简单输入并没有实现即时通讯功能）

最新推荐文章于 2024-07-24 23:00:08 发布

yc——wcn

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量472

点赞数

分类专栏：技术文章标签：即时通讯原生js 简单实现前端开发

本文链接：https://blog.csdn.net/qq_37274548/article/details/91450970

版权

技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        width: 500px;
        moz-user-select:none; /* Firefox私有属性 */
        -webkit-user-select:none; /* WebKit内核私有属性 */
        -ms-user-select:none; /* IE私有属性(IE10及以后) */
        -khtml-user-select:none; /* KHTML内核私有属性 */
        -o-user-select:none; /* Opera私有属性 */
        user-select:none; /* CSS3属性 */
    }
    p{
        width: 500px;
        height: 200px;
        border: 1px solid #eee;
        overflow: hidden;
        overflow-y: auto;
        padding: 10px;
        -webkit-user-modify: read-write;
    }
    p:focus {
        outline:none;
        border: 1px solid pink;
    }
    button {
        border:none;
        background:purple;
        color: #FFf;
        border-radius: 5px;
        outline:none;
        width: 80px;
        height: 40px;
        position: absolute;
        top:400px;
        left: 400px;
    }
</style>
<body>
    <div></div>
    <p contenteditable="true" oninput="num(this)"></p>
    <button>发送</button>
</body>
<script>
    var html=""
    for (var i=0;i<135;i++) {
        html+=`<img src="./${i<10?0:""}${i}.gif" data-path="./${i<10?0:""}${i}.gif" onclick="add(this)"/>`
    }

    document.querySelector("div").innerHTML=html

    function add(a) {
        var path = a.dataset.path
        var str=`<img src="${path}" />`
        document.querySelector("p").innerHTML+=str
    }

    function num(str) {
        console.dir(str.innerHTML.length)
    }
</script>
</html>

yc——wcn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
即时通讯原生js实现表情输入（就是简单输入并没有实现即时通讯功能）

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0...
复制链接

扫一扫