当前位置:网站首页>通过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时,触发按钮样式变化。
边栏推荐
猜你喜欢
![[C language] flexible array](/img/22/3255740602232abfdf69624762adca.jpg)
[C language] flexible array

The meaning and calculation method of receptive field

Message queue avoiding repeated refund by idempotent design and atomic lock

Error: GPG check FAILED Once install MySQL

电子商务盛行,怎么提高商店转换率?

Redis (4) of NoSQL database: redis new data type

树形下拉选择框el-select结合el-tree效果demo(整理)

Configuring the flutter development environment

施工企业选择智慧工地的有效方法

How to fix Error: Failed to download metadata for repo ‘appstream‘: Cannot prepare internal mirrorli
随机推荐
NoSQL数据库之Redis(四):Redis的发布和订阅
Introduction to NoSQL database
List collection implements paging
【软件测试】接口——基本测试流程
Creating a new generation of production and service tools with robot education
Qt 容器类
About DDNS
Redis de la base de données nosql (v): redis Jedis Tests
Flutter is configured with a domestic image and connected to the real machine
你真的懂 “Binder 一次拷贝吗“?
Service grid ASM year end summary: how do end users use the service grid?
As a qualified network worker, you must master DHCP snooping knowledge!
QT foreach keyword
QT serial port programming
JDBC连接数据库,socket发送客户端。
Redis (V) of NoSQL database: redis_ Jedis_ test
消息队列之通过队列批处理退款订单
Differences between JSON objects and JSON strings
Idea common plug-ins
The realization of changing pop-up background at any time