sina微博输入功能实现

来源：互联网发布：京东程序员待遇编辑：程序博客网时间：2024/06/05 07:43

今天在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>

0 0