当前位置:网站首页>通过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时,触发按钮样式变化。
边栏推荐
- How to do the performance pressure test of "Health Code"
- Ribbon service invocation and load balancing
- NoSQL数据库介绍
- json tobean
- Redistemplate handles hash integer type problem resolution
- Flutter is configured with a domestic image and connected to the real machine
- WDCP accesses all paths that do not exist and jumps to the home page without returning 404
- Database - Synonyms
- QT qlineedit details
- YGG pilipinas: typhoon Odette disaster relief work update
猜你喜欢

json tobean
![[answer all questions] CSDN question and answer function evaluation](/img/32/571c9c5f4eb7f69173ae79b8dcf427.jpg)
[answer all questions] CSDN question and answer function evaluation

NoSQL数据库之Redis(四):Redis的发布和订阅

数据库-同义词

Message queue batch processing refund order through queue

Testing grpc service with grpcui

How to fix Error: Failed to download metadata for repo ‘appstream‘: Cannot prepare internal mirrorli

In vscade, how to use eslint to lint and format

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

Multimodal learning pooling with context gating for video classification
随机推荐
Object detection - VIDEO reasoning using yolov6
数据库-同义词
Message queue avoiding repeated refund by idempotent design and atomic lock
Idea common plug-ins
Qt 容器类
QT qframe details
电子商务盛行,怎么提高商店转换率?
[translation] [Chapter II ①] mindshare PCI Express technology 3.0
NoSQL数据库之Redis(一):安装 & 简介
uva11825
转:侯宏:企业数字化转型的关键不是技术,而是战略
Multimodal learning pooling with context gating for video classification
树形下拉选择框el-select结合el-tree效果demo(整理)
NoSQL數據庫之Redis(五):Redis_Jedis_測試
To: Hou Hong: the key to enterprise digital transformation is not technology, but strategy
Redis of NoSQL database (I): Installation & Introduction
Redis in NoSQL database (4): redis publishing and subscription
Database - Synonyms
Redis (V) of NoSQL database: redis_ Jedis_ test
NoSQL数据库介绍