当前位置:网站首页>通过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时,触发按钮样式变化。
边栏推荐
猜你喜欢

Differences between JSON objects and JSON strings

JDBC connects to the database and socket sends the client.

Crawler data analysis (introduction 2-re analysis)

QT qlineedit details

Ci tools Jenkins installation configuration tutorial

关联性——相关性分析

Multimodal learning pooling with context gating for video classification

Idea integrated code cloud

How does schedulerx help users solve distributed task scheduling problems?

package. Are you familiar with all configuration items and their usage of JSON
随机推荐
UVM authentication platform
Introduction to NoSQL database
2022.6.27-----leetcode.522
Testing grpc service with grpcui
NoSQL數據庫之Redis(五):Redis_Jedis_測試
Object detection - VIDEO reasoning using yolov6
Labor skills courses integrated into steam Education
你真的懂 “Binder 一次拷贝吗“?
国内代码托管中心- 码云
Effective methods for construction enterprises to select smart construction sites
Ci tool Jenkins II: build a simple CI project
[QNX Hypervisor 2.2用户手册]6.2.1 Guest之间通信
Suggestions on digital transformation of large chemical enterprises
And check the collection hello
Differences between JSON objects and JSON strings
消息队列之通过队列批处理退款订单
What is the difference between software engineer and software development? What is the difference between software engineer and software developer?
Qt foreach关键字
NoSQL数据库之Redis(五):Redis_Jedis_测试
Vite quick start