sina微博输入功能实现

最新推荐文章于 2021-06-04 22:51:49 发布

高手坟墓丶

最新推荐文章于 2021-06-04 22:51:49 发布

阅读量504

点赞数

分类专栏： web综合文章标签：微博新浪 js css

本文链接：https://blog.csdn.net/qq_31070475/article/details/55552983

版权

web综合专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天在input里面用onchange方法，但是不能实现动态在别的地方显示内容，就找了一下有一个叫oninput方法可以。突然想到微博140字数限制也有这个功能，就想着把微博实现一下。然后只做了一部分，还是挺弱的。。。

第一张是微博的页面:
这里写图片描述

第二张是我自己写的：
这里写图片描述
实现的部分功能：

当输入框里没有内容时，点击发布按钮不提交，并且颜色不变深；当有内容时，右上角提示输入的字数，并将右下角发布按钮变深，删除输入框内容后恢复初始状态。
点击输入框任意位置或者选择任意文字，会自动插入或者替换成 #话题#。
选择哪些人可以看到。
还有都是小细节，鼠标hover字体颜色变化等。
自己将以前看过的flex布局、css选择器、事件监听、委托等知识点应用熟悉了一下，学习了光标位置的一些知识。还有自适应、图片、视频上传、css动画等没有做，看上去很简单的东西其实还是有很多知识的，需要以后多加练习思考。

<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        .title{
            width: 600px;
            height: 70px;
            display: flex;
            flex-direction:row;
            justify-content:space-between;
            align-items:center;
        }
        .bottom: {
            width: 600px;
            height: 70px;
            display: flex;
            flex-direction:row;
            justify-content:space-between;
            align-items:center;
        }
        #whoSee{
            height:40px;
            width:90px;
            color:black;
            display:flex;
            align-items:center;
            justify-content:center

        }
        #submit{
            border:0px solid ;
            height:40px;
            width:75px;
            background-color:#ffc09f;
            color:white;
            display:flex;
            align-items:center;
            justify-content:center
        }

        #people{
            display:none;
            position:absolute;
            left:380px;
            top:200px;
            border:1px solid #ccc;
        }
        a{
            text-decoration: none;
            color:black;

        }
        a:hover{
            color:#eb7350;
        }
        #people ul li{
            list-style-type:none;
        }
    </style>
</head>
<body>
<div class="title">
    <p>有什么新鲜事想告诉大家？</p>
    <div>已输入<span id="demo"></span>字</div>
</div>
<div  style="border:1px solid orange;width:600px;">
    <textarea id="myInput" style="height: 68px; width:600px;" oninput="myFunction()"></textarea>
</div>
<div class="title" id="buttomTitle">
    <div>
        <a href="#" title="表情" ><img src="1.jpg">表情</a>
        <a href="#" title="图片"><img src="2.png">图片</a>
        <a href="#" title="视频"><img src="3.png">视频</a>
        <a href="#" title="话题"><img src="4.png">话题</a>
        <a href="#" title="头条文章"><img src="5.png">头条文章</a>
        <img src="6.png" title="查看更多">
    </div>
    <div style="display:flex;flex-direction:row">
        <a href="#" id="whoSee" title="公开-你发表的微博可以被大家公开查看哦" >公开v</a>
        <a href="#" id="submit" >发布</a>
    </div>
</div>
<div id="people" >
    <ul>
        <li>
            <a href="#" id="li1" title="公开-你发表的微博可以被大家公开查看哦">公开</a>
        </li>
        <li>
            <a href="#" id="li2" title="好友圈-你发表的微博只有好友可以看见">好友圈</a>
        </li>
        <li>
            <a href="#" id="li3" title="仅自己可见-你发表的微博只有自己可以看见">仅自己可见</a>
        </li>
        <li>
            <a href="#" id="li4" title="群可见-你发表的微博所有群成员可以看见">群可见</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var myFunction=()=>{
         var x = document.getElementById("myInput").value;
        document.getElementById("demo").innerHTML =x.length;
    }

    document.getElementById("myInput").addEventListener("input",()=>{
        if(!!document.getElementById("myInput").value.length){
            document.getElementById("submit").style.backgroundColor="#f7671d";
        }
        else{
            document.getElementById("submit").style.backgroundColor="#ffc09f";
        }
    });
    document.getElementById("submit").addEventListener("click",()=>{
        if(!!document.getElementById("myInput").value.length){
            alert("成功发布！发布的内容为："+document.getElementById("myInput").value);
        }

    });
    document.getElementById("whoSee").addEventListener("click",()=>{
        if((!document.getElementById("people").style.display)||document.getElementById("people").style.display=="none"){
            document.getElementById("people").style.display="block";

        }
        else{
            document.getElementById("people").style.display="none";
        }


    });
    document.getElementById("whoSee").addEventListener("mouseover",()=>{

        document.getElementById("whoSee").style.color="#f7671d";

    });
    document.getElementById("whoSee").addEventListener("mouseout",()=>{

        document.getElementById("whoSee").style.color="black";

    });

    //添加话题
    document.body.addEventListener("click",function(e){
        if(e.target.id!="whoSee"){
            document.getElementById("people").style.display="none";
        }
        if(e.target.childNodes.length==2 && e.target.childNodes[1].data=="话题"){
            var topicAdd = "#在这里输入你想要说的话题#";
            var tempObj = document.getElementById("myInput");
            if(tempObj.value.indexOf("#在这里输入你想要说的话题#")== -1){
                var start = tempObj.selectionStart;
                var end = tempObj.selectionEnd;
                tempObj.value = tempObj.value.substring(0,start)+topicAdd+tempObj.value.substr(end);
                tempObj.focus();
                document.getElementById("demo").innerHTML = document.getElementById("myInput").value.length;
                document.getElementById("submit").style.backgroundColor="#f7671d";
            }
        }
    });

    //可见的人
    document.getElementById("people").addEventListener("click",function(e){
        if(e.target.text=="公开"){
            document.getElementById("whoSee").innerHTML="公开v";
            document.getElementById("submit").innerHTML="发布";
        }
        if(e.target.text=="好友圈"){
            document.getElementById("whoSee").innerHTML="好友圈v";
            document.getElementById("submit").innerHTML="好友发布";
        }
        if(e.target.text=="仅自己可见"){
            document.getElementById("whoSee").innerHTML="仅自己可见v";
            document.getElementById("submit").innerHTML="发布";
        }
        if(e.target.text=="群可见"){
            document.getElementById("whoSee").innerHTML="群可见v";
            document.getElementById("submit").innerHTML="发布";
        }
    });
</script>
</body>
</html>