当前位置:网站首页>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 .
边栏推荐
- shell条件判断详解
- 你真的懂 “Binder 一次拷贝吗“?
- jmeter 用beanshell导入自己jar包老是查找不到
- How to view software testing training? Do you need training?
- WebRTC系列-网络传输之8-连通性检测
- Using IPv6 to access remote desktop through public network
- Markdown skill tree (4): link
- Solve the problem that NPM does not have permission
- 期末总结——Spark
- Markdown 技能树(1):MarkDown介绍
猜你喜欢

Alternative writing of if else in a project

SYSTEMd management node exporter

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

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

mmclassification安装与调试

通过keyup监听textarea输入更改按钮样式
What tools do testers need to know

Imx6dl4.1.15 supports EIM bus (upper) - actual operation and modification.

Autosar SWC在Simulink中Parameter的使用

Ci tools Jenkins installation configuration tutorial
随机推荐
[popular science materials] materials from scientific spirit to scientific knowledge
Markdown skill tree (9): tables
利用IPv6实现公网访问远程桌面
Two ways to write throttling - recently seen
Use of parameter in Simulink for AUTOSAR SWC
关联性——相关性分析
什么是测试架构师
示波器 符号
Digital IC Design - UART
ShapeShifter: Robust Physical Adversarial Attack on Faster R-CNN Object Detector
电子商务盛行,怎么提高商店转换率?
What is a Test Architect
查看tensorflow是否支持GPU,以及测试程序
【FreeRTOS】中断机制
Appium自动化测试基础 — ADB常用命令(三)
BeanPostProcessor 和 BeanFactoryPostProcessor
施努卡:3d机器视觉检测系统 3d视觉检测应用行业
Ci tools Jenkins installation configuration tutorial
How to talk about salary correctly in software test interview?
Chinese garbled code on idea console [valid through personal test]