要求：正常输入，发布按钮变亮，点击可以正常发布，如果输入空格，按钮不亮，点击无任何反应，若空格后面有有效字符，按钮功能恢复正常，前面的空格不被显示。
效果展示：
jQuery仿微博发布功能
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新浪微博</title>
<link href="../../../img/weibo4.ico" rel="icon">
<script src="../../../jquery-3.4.1.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
background: url("../../../img/weibobg.png");
}
#container {
position: relative;
width: 1200px;
height: 900px;
margin: auto;
top: 60px;
}
.head {
width: 100%;
height: 50px;
position: fixed;
z-index: 1;
}
.head img {
width: 100%;
}
.left {
position: absolute;
left: 15%;
top: 0;
width: 160px;
height: 710px;
}
.left img {
width: 100%;
height: 100%;
}
.right {
position: absolute;
right: 0;
width: 240px;
height: 710px;
}
.right img {
height: 100%;
width: 100%;
}
.center {
width: 600px;
height: 170px;
position: absolute;
left: 350px;
top: 7px;
}
.center img {
width: 100%;
height: 100%;
}
.banner {
position: absolute;
width: 603px;
height: 42px;
top: 186px;
left: 350px;
}
.banner img {
width: 100%;
height: 100%;
}
.footer {
width: 600px;
height: 500px;
position: absolute;
top: 235px;
left: 350px;
}
.footer img {
width: 100%;
}
#send {
width: 574px;
height: 75px;
position: absolute;
top: 50px;
left: 362px;
outline: none;
border: none;
resize: none; /*不可拉伸*/
}
#btn {
position: absolute;
top: 135px;
left: 859px;
height: 29px;
width: 82px;
border-radius: 2px;
background-color: #ff8140;
border: none;
color: #ffffff;
outline: none;
filter: contrast(70%); /*对比度*/
}
/*padding top right bottom left*/
.info {
width: 600px;
/*height: 130px;*/
background-color: #ffffff;
border-radius: 2px;
position: relative;
margin: 0 0 10px 0; /*top right bottom left*/
}
.info_head {
width: inherit;
height: 60px;
position: relative;
}
.news {
position: absolute;
top: 670px;
left: 1170px;
height: 40px;
width: 400px;
}
.news img {
width: 50%;
height: 100%;
}
.text {
display: inline-block;
width: 470px;
position: relative;
left: 80px;
font-size: 13px;
top: -5px;
color: #333333;
word-wrap: break-word; /*自动换行，自适应容器*/
margin-bottom: 3px;
}
.info_footer {
width: inherit;
height: 40px;
position: relative;
}
.info_footer hr { /*hr本身有border=1px，要更改颜色要先把原先的border去掉，再给一个高度，再加一个背景颜色方可实现hr的颜色更改*/
border: none;
height: 1px;
background: #e7e7e7;
}
.info_head_head {
display: inline-block;
width: 50px;
height: 50px;
background: url("../../../img/weibo头像.jpg") no-repeat;
background-size: 100% 100%;
border-radius: 50%;
position: absolute;
top: 10px;
left: 20px;
}
.info_head_name {
display: inline-block;
width: 150px;
height: 20px;
/*border: 1px solid #333;*/
position: absolute;
top: 16px;
left: 80px;
font-weight: bold;
font-size: 13px;
}
.info_head_time {
display: inline-block;
width: 150px;
height: 20px;
position: absolute;
top: 36px;
left: 80px;
font-size: 11px;
color: #b3b3b3;
}
.info_head_icon {
display: inline-block;
width: 20px;
height: 20px;
position: absolute;
top: 14px;
right: 15px;
background: url("../../../img/arrow_bottom.png") no-repeat;
background-size: 80% 70%;
}
</style>
</head>
<body>
<div class="head">
<img src="../../../img/weibo.png">
</div>
<div id="container">
<div class="left">
<img src="../../../img/weiboleft.png">
</div>
<div class="center">
<img alt="" src="../../../img/weiboinner.png">
</div>
<div class="banner">
<img src="../../../img/weibofoor.png"/>
</div>
<div class="footer">
<img alt="" src="../../../img/weibobb.png" style="height: 470px">
<!-- <div class="info">-->
<!-- <div class="info_head">-->
<!-- <span class="info_head_head"></span>-->
<!-- <span class="info_head_name">Hello_hongbin</span>-->
<!-- <span class="info_head_time">1秒前 来自 微博 weibo.com</span>-->
<!-- <span class="info_head_icon"></span>-->
<!-- </div>-->
<!-- <span class="text">text</span>-->
<!-- <div class="info_footer"><hr>-->
<!-- <img src="../../../img/info_footer.png" alt="make sure文件地址是否正确">-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="right">
<img src="../../../img/nweiboright.png">
</div>
<div class="news">
<img alt="" src="../../../img/news.png">
</div>
<textarea id="send"></textarea>
<button disabled="disabled" id="btn">发布</button>
<!-- disabled:使按钮失效 当disabled=false时恢复正常-->
</div>
<script>
$(function () {
//发布按钮点击获取val并发布
$('#btn').on('click', function () {
let val = $('#send').val();
//模板字符串` `
let send = $(`<div class="info">
<div class="info_head">
<span class="info_head_head"></span>
<span class="info_head_name">Hello_hongbin</span>
<span class="info_head_time">1秒前 来自 微博 weibo.com</span>
<span class="info_head_icon"></span>
</div>
<span class="text">${val}</span>
<div class="info_footer"><hr>
<img src="../../../img/info_footer.png" alt="make sure文件地址是否正确">
</div>
</div>`);
send.prependTo(".footer");
$('#send').val('');//发布完后，输入框清空
$(this).prop('disabled', true).css('filter', 'contrast(70%)');
});
//空内容时发布按钮失效
//实时监听事件1）propertychange只要当前对象的属性发生改变就会触发该事件
// 2）input是标准的浏览器事件，一般应用于input元素，当input的value发生变化
$('body').bind('input propertychange', function (start) {
//输入的内容为空格的时候发布按钮失效(内容的长度和输入的空格长度一致)
let $val = $('#send').val().length;
let val = $('#send').val();
let arr = [];
for (let i = 0; i < $val; i++) {
arr.push($('#send').val()[i]);//将对象里的每一个元素,添加到数组中
}
//console.log(arr);
// console.log($("#send").val());
//console.log($val);
let reg = JSON.stringify(arr);//将对象转为json格式
//console.log(reg);
let str = reg.match(/\s/g);
if (str === null) {
str = [];
}
//console.log(str);//空格
//console.log(str.length);//空格的长度
//console.log($val);//输入内容的长度
let $str = str.length;
//匹配的是开头的空格当有字符出现时停止计数
let b = [];
for (let i = 0; i < $val; i++) {
b.push(val[i]);
}
let neb = b.join('');
//console.log(neb);
let ok = neb.match(/^\s+/g);
let json = JSON.stringify(ok);
let $pk = json.match(/\s/g);
//如果开头没有空格，正则返回null，浏览器会报错，执行下一行代码即可解决
if($pk === null){
$pk = []
}
let $pksum = $pk.length;
//console.log($pksum);//开头的空格数
//开头的空格数和全部的空格数相等时，#btndisabled
//为解决开头空格，输入字符后#btn解开生效后再删除有效字符。这是因#btn已打开，就可以发送空白微博的问题。完美解决！
if ($pksum === $str){
$('#btn').css('filter','contrast(70%)')
.prop('disabled',true);
}
let check = true;
if ($val === $str) {
check = false;
$('#btn').css('filter', 'contrast(70%)');
}
if ($val > 0 && check) {
$('#btn').prop('disabled', false).css('filter', 'contrast(100%)');
//disabled 是属性，不是样式，不能用css获取
//$('#send').val("");
}
if ($val === 0) {
$('#btn').css('filter', 'contrast(70%)');
$('#btn').prop('disabled', true)
}
})
});
</script>
</body>
</html>
