当前位置:网站首页>通过keyup监听textarea输入更改按钮样式
通过keyup监听textarea输入更改按钮样式
2022-06-29 06:38:00 【Yuan_mingyu】
在制作评论框时,设想将发送评论的按钮设置成:当没有字符输入时(初始状态),按钮不可用,颜色为白色;当评论框内有字符输入时,按钮可用,颜色为橙色。
效果如图:
初始状态,没有输入
输入评论后
由于按钮样式的变化取决于textarea中是否有输入,即$(textarea).val()是否为空
代码如下:
//comment_content_2为textarea的id
$("#comment_content_2").keydown(function(e)
{
var text = $(this).val(),
len = text.length;
if(len == 0)
{
$("#send_btn button").removeClass('send_btn_active');
$("#send_btn button").addClass('send_btn_unactive');
$("#send_btn button").attr('disabled', 'true');
}
else
{
$("#send_btn button").removeClass('send_btn_unactive');
$("#send_btn button").addClass('send_btn_active');
$("#send_btn button").removeAttr('disabled');
}
});
代码实际运行时发现,在输入框内输入字符增加时,按钮变化正常,但是在字符减少时,会出现输入框内已经没有字符时(字符数为0),按钮样式未变化,此时继续按退格键,按钮样式才发生变化。即 输入框内字符在减少到0时,需要继续退一格才可以触发按钮样式变化。
查阅相关的资料后,发现keydown和keyup都可以监听textarea中的输入,于是将上述代码中的keydown改为keyup,达到了预期效果,输入框内字符减少到0时,触发按钮样式变化。
边栏推荐
- Oscilloscope symbols
- The annual technology inventory of cloud primitives was released, and it was the right time to ride the wind and waves
- 存token获取token刷新token发送header头
- NoSQL数据库之Redis(四):Redis的发布和订阅
- 多模态 —— Learnable pooling with Context Gating for video classification
- List collection implements paging
- Introduction to Ceres Quartet
- Message queue batch processing refund order through queue
- Database - Synonyms
- Summary of some new datasets proposed by cvpr2021
猜你喜欢

json tobean

idea使用

Redistemplate handles hash integer type problem resolution

Qt QLineEdit详解

Two methods for preorder traversal of binary tree

把多个ROC曲线画在一张图上

你真的懂 “Binder 一次拷贝吗“?

YGG cooperated with Web3 platform leader to empower the creative community with Dao tools and resources

NoSQL数据库之Redis(四):Redis新数据类型

Redis of NoSQL database (I): Installation & Introduction
随机推荐
关于DDNS
jetson tx2
uva10635
Share 10 interview questions related to JS promise
树形下拉选择框el-select结合el-tree效果demo(整理)
把多个ROC曲线画在一张图上
package.json的所有配置项及其用法,你都熟悉么
Li Kou daily question - day 30 -1281 Difference of sum of bit product of integer
Instanceklass "suggestions collection" of hotspot class model
Crawler data analysis (introduction 2-re analysis)
Labor skills courses integrated into steam Education
CI工具Jenkins之二:搭建一个简单的CI项目
Ci tools Jenkins installation configuration tutorial
Daily question - force deduction - multiply the found value by 2
电子商务盛行,怎么提高商店转换率?
YGG cooperated with Web3 platform leader to empower the creative community with Dao tools and resources
Chinese garbled code on idea console [valid through personal test]
Qt foreach关键字
The annual technology inventory of cloud primitives was released, and it was the right time to ride the wind and waves
2022.6.27-----leetcode.522