当前位置:网站首页>Listen to textarea input through Keyup to change button style
Listen to textarea input through Keyup to change button style
2022-06-29 07:29:00 【Yuan_ mingyu】
When making a comment box , Imagine setting the send Comment button to : When no characters are entered ( The initial state ), Button not available , The color is white ; When characters are entered in the comment box , Button available , The color is orange .
The effect is as shown in the picture :
The initial state , No input 
After entering comments 
Because the button style changes depending on textarea Whether there is any input in , namely $(textarea).val() Is it empty
The code is as follows :
//comment_content_2 by textarea Of 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');
}
});
When the code actually runs, it finds , When characters are added in the input box , Button changes normally , But when characters are reduced , When there are no characters in the input box ( The number of characters is 0), The button style has not changed , Continue to press the backspace key , Button style changes . namely The characters in the input box are reduced to 0 when , You need to continue to backspace to trigger the button style change .
After consulting relevant materials , Find out keydown and keyup Can monitor textarea The input , So, in the above code keydown Change it to keyup, The expected effect has been achieved , The characters in the input box are reduced to 0 when , Trigger button style change .
边栏推荐
- VPS是干嘛用的?有哪些知名牌子?与云服务器有什么区别?
- The realization of changing pop-up background at any time
- How to talk about salary correctly in software test interview?
- Ci tools Jenkins installation configuration tutorial
- IMX6DL4.1.15支持EIM总线(下)——配置原理分析。
- 并发幂等性防抖
- Idea integrated code cloud
- 游标长时间open导致表无法vacuum问题
- 反射修改final
- [translation] E-Cloud. Large scale CDN using kubeedge
猜你喜欢

mmclassification安装与调试

帆船动力学仿真分析

Explain canfd message and format in AUTOSAR arxml in detail

微信小程序学习笔记(暑假)

施努卡:什么是视觉定位系统 视觉定位系统的工作原理

excel高级绘图技巧100讲(六)-甘特图在项目进度上的实战应用案例

TREE ALV 展开Node或者点击Toolbar按钮时DUMP(CL_ALV_TREE_BASE==============CP|SET_ITEMS_FOR_COLUMN)

九州云助力内蒙古“东数西算”工程,驱动测绘行业智慧新生态

Appium自动化测试基础 — ADB常用命令(三)

IMX6DL4.1.15支持EIM总线(上)——实际操作,修改内容。
随机推荐
1183:病人排队
【科普资料】从科学精神到科学知识的材料
TF.Slim的repeat和stack操作
MIPS指令集与简要分析
Redis of NoSQL database (II): introduction to redis configuration file
Markdown skill tree (4): link
tf.compat.v1.global_variables
How to authorize subordinates?
服装行业的CRM品牌供应商如何选型?
matlab 多普勒效应产生振动信号和处理
【翻译】e-Cloud。使用KubeEdge的大规模CDN
九州云助力内蒙古“东数西算”工程,驱动测绘行业智慧新生态
[translation] swarmed out. Design methods for building modern applications
Utilisation d'IPv6 pour réaliser l'accès public au bureau distant
关联性——相关性分析
Appium自动化测试基础 — ADB常用命令(三)
What tools do testers need to know
National Security Agency and CISA kubernetes reinforcement guidelines - new content in version 1.1
Markdown skill tree (8): code blocks
Is virtual DOM really the fastest?