JavaScript---判断用户输入是否为空

输入框对象.value.trim() !== ""    // trim() 去除左右空格

trim() 方法: 去除左右空格

eg:

<body>
<div class="wrapper"><textarea id="tx" placeholder="评论" rows="2" maxlength="200"></textarea><button>发布</button>
</div>
<div class="wrapper"><span class="total">0/200字</span>
</div>
<div class="list"><div class="item" style="display: none"><div class="info"><p class="name">hhhhhh</p><p class="text">perfect</p><p class="time">2023/07/30</p></div></div>
</div><script>const tx = document.querySelector("#tx")const total = document.querySelector(".total")const item = document.querySelector(".item")const text = document.querySelector(".text")tx.addEventListener("focus", function () {   // 获得焦点total.style.opacity = 1})tx.addEventListener("blur", function () {    //失去焦点total.style.opacity = 0})tx.addEventListener("input", function () {// console.log(tx.value.length)    // 输入框文本长度total.innerHTML = `${tx.value.length}/200字`})// 按下回车发布评论tx.addEventListener("keyup", function (e) {if (e.key === 'Enter') {// 判断用户输入是否为空// if (tx.value.trim() !== ""){   // trim() 去除左右空格// 也可以这样写  if (tx.value.trim()){// console.log("键盘按下了")item.style.display = "block"text.innerHTML = tx.valueconsole.log(tx.value.trim() === "")}// 按下回车,清空文本域tx.value = ""// 按下回车,把字符统计复原total.innerHTML="0/200字"}})
</script>
</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17569.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】模板进阶(模板的特化,非类型模板参数,模板的分离编译)

文章目录 一、模板使用时一定要加typename的情况二、 非类型模板参数三、模板的特化1.函数模板特化2.类模板特化1.全特化&#xff1a;2. 偏特化&#xff1a;1. 部分特化2.参数更一步限制 四、模板的分离编译1.Stack.h2.Stack.cpp(定义)3.test.cpp 一、模板使用时一定要加typena…

TSINGSEE青犀视频汇聚平台EasyCVR多种视频流播放协议介绍

众所周知&#xff0c;TSINGSEE青犀视频汇聚平台EasyCVR可支持多协议方式接入&#xff0c;包括主流标准协议GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。今天我们来说一说&#xff0c;EasyCVR平台支持分…

元类在测试框架中的运用

元类在测试框架中的运用 书接上回 我们知道了元类的基本用法&#xff0c;也写了一个小demo&#xff0c;接下来我们就尝试运用进我们测试框架。 #一款无需编码且易用于二次开发的接口测试框架。 #我写的我写的我写的我写的 pip install mwj-apitest #这里面就用到了元类&…

HTML <rp> 标签

实例 一个 ruby 注释&#xff1a; <ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>浏览器支持 元素ChromeIEFirefoxSafariOpera<rp>5.05.538.05.015.0 Internet Explorer 9, Firefox, Opera, Chrome 以及 S…

maven本地仓库地址修改+maven国内镜像设置+maven运行所需pos.xml文件配置基本写法

1&#xff0c;maven本地仓库地址修改 maven在使用过程中&#xff0c;本地项目仓库其空间占用会越来越大&#xff0c;但是其默认仓库位置往往是以C盘为主&#xff0c;C盘作为系统盘常常会遇到所在盘空间占满的情况&#xff0c;所以我们将其改至其他硬盘空间位置为适合做法&#…

二十三种设计模式第二十三篇--状态模式

状态模式&#xff0c;是一种行为模式&#xff0c;在软件开发过程中&#xff0c;对象按照不同的情况做出不同的行为&#xff0c;我们把这样的对象称为具有状态的对象&#xff0c;而把影响对象行为的一个或者多个动态变化的属性称为状态。 对这种具有状态的对象变成&#xff0c;…

71. ElasticSearch 5.0.0 安装部署常见错误或问题

文章目录 ElasticSearch 5.0.0 安装部署常见错误或问题问题一&#xff1a;UnsupportedOperationException问题二&#xff1a;ERROR: bootstrap checks failed问题三&#xff1a;max number of threads [1024] for user [es] likely too low, increase to at least [2048]问题四…

opencv03-补充-vector的操作

opencv03-补充-vector的操作 参考&#xff1a;https://www.runoob.com/w3cnote/cpp-vector-container-analysis.html 构造方法(具体介绍看API文档) class Student {public:private:string name;};int main() {vector<int>();vector<int> v1;vector<Student&g…

【kubernetes】k8s单master集群环境搭建及kuboard部署

k8s入门学习环境搭建 学习于许大仙: https://www.yuque.com/fairy-era k8s官网 https://kubernetes.io/ kuboard官网 https://kuboard.cn/ 基于k8s 1.21.10版本 前置环境准备 一主两从&#xff0c;三台虚拟机 CPU内存硬盘角色主机名IPhostname操作系统4C16G50Gmasterk8s-mast…

JVM面试题--JVM组成

JVM是什么 Java Virtual Machine Java程序的运行环境&#xff08;java二进制字节码的运行环境&#xff09; 运行流程 什么是程序计数器&#xff1f; 程序计数器&#xff1a;线程私有的&#xff0c;内部保存的字节码的行号。用于记录正在执行的字节码指令的地址。 我们知道ja…

第4章 .NetCore程序通过花生壳实现内网穿透

.NetCore程序在调试环境中都是基于内网的&#xff0c;但是.NetCore程序如果需要集成微信第3方认证程序&#xff0c;由于微信第3方认证程序需要外网把认证后的数据信息&#xff0c;通过外网传输到.NetCore程序中&#xff0c;所以必须先实现把内网地址映射为外网地址这样的操作叫…

【电影推荐系统】数据爬取、数据加载进MongoDB数据库

概览 本篇主要介绍数据来源、数据加载进数据库过程 1 数据获取 使用Scrapy爬取豆瓣电影数据&#xff0c;然后利用movielens数据集来造一份rating数据。 1.1 数据集获取 数据集获取&#xff1a;选取movielens 数据集&#xff1a;movielens官网数据集包括&#xff1a;movies…

【数据挖掘torch】 基于LSTM电力系统负荷预测分析(Python代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Istio 安全 授权管理AuthorizationPolicy

这个和cka考试里面的网络策略是类似的。它是可以实现更加细颗粒度限制的。 本质其实就是设置谁可以访问&#xff0c;谁不可以访问。默认命名空间是没有AuthorizationPolicy---允许所有的客户端访问。 这里是没有指定应用到谁上面去&#xff0c;有没有指定使用哪些客户端&#…

SE-Net注意力机制

📌本次任务:了解SE-Net原理 SE-Net 是 ImageNet 2017(ImageNet 收官赛)的冠军模型,是由WMW团队发布。具有复杂度低,参数少和计算量小的优点。且SENet 思路很简单,很容易扩展到已有网络结构如 Inception 和 ResNet 中。(这篇论文是2019年的,应该是后续做了更新) 一…

12-3_Qt 5.9 C++开发指南_创建和使用静态链接库

第12章中的静态链接库和动态链接库介绍&#xff0c;都是以UI操作的方式进行&#xff0c;真正在实践中&#xff0c;可以参考UI操作产生的代码来实现同样的功能。 文章目录 1. 创建静态链接库1.1 创建静态链接库过程1.2 静态链接库代码1.2.1 静态链接库可视化UI设计框架1.2.2 qw…

Netty3 和Netty4区别

Netty3 和Netty4区别 目录概述需求&#xff1a; 设计思路实现思路分析1.Netty3和Netty4区别2.demo 拓展实现 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better resul…

【华为OD机试】荒岛求生【2023 B卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 有一个荒岛,只有左右两个港口,只有一座桥连接这两个港口,现在有一群人需要从两个港口逃生, 有的人往右逃生,有的往左逃生,如果两个人相遇,则PK,体力值大的能够打赢体力值小的, …

Java学习资料的推荐

以下是一些Java学习资料的推荐&#xff1a; 1. Java入门教程&#xff1a;https://www.runoob.com/java/java-tutorial.html 2. 阿里巴巴Java开发手册&#xff1a;https://github.com/alibaba/p3c/blob/master/README_zh_CN.md 3. Java编程思想&#xff08;Thinking in Java&…

SLA探活工具EaseProbe

工具介绍 EaseProbe可以做三种工作&#xff1a;探测、通知和报告。 项目地址&#xff1a;https://github.com/megaease/easeprobe 1、安装 [rootlocalhost ]# yum -y install unzip go [rootlocalhost ]# unzip easeprobe-main.zip [rootlocalhost ]# cd easeprobe-main [r…