javascript 输入框监听事件
<div class="coupon-exchange clearfix">
<div class="code-input">
<input type="text" placeholder="请输入兑换码" class="input" id="couponExchangeInput"/>
<i class="icon-clear" id="couponExchangeClear"></i>
</div>
<div class="btn-exchange" id="couponExchangeBtn">兑换</div>
</div>
function couponExchange() {
//中文输入,输入完成后才触发事件
var flag = true;
$('#couponExchangeInput').on('compositionstart',function(){
flag = false;
});
$('#couponExchangeInput').on('compositionend',function(){
flag = true;
});
$('#couponExchangeInput').on('input', function(){
var _this = this;
setTimeout(function(){
if(flag){
var _val = $(_this).val();
$('#couponExchangeBtn').addClass('active');
$('#couponExchangeClear').css('display', 'block');
if(_val == ''){
$('#couponExchangeBtn').removeClass('active');
$('#couponExchangeClear').hide();
}
if(strlen(_val) > 100){
var _cutVal = cut_str(_val, 50);
$(_this).val(_cutVal);
}
}
},0);
});
$('#couponExchangeClear').click(function(){
$('#couponExchangeBtn').removeClass('active');
$('#couponExchangeClear').hide();
$('#couponExchangeInput').val('').focus();
});
$('#couponExchangeInput').blur(function(){
var _val = $(this).val();
if(strlen(_val) > 100){
var _cutVal = cut_str(_val, 50);
$(this).val(_cutVal);
}
});
$('#couponExchangeBtn').click(function(){
if($(this).hasClass('active')){
console.log(1);
}
});
}
//获取字符串的长度,一个中文占位两个字符长度
function strlen(str) {
var len = 0;
for (var i = 0; i < str.length; i++) {
var c = str.charCodeAt(i);
if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
len++;
}
else {
len += 2;
}
}
return len;
}
//截取字符串的长度,一个中文占位两个字符长度
function cut_str(str, len){
var char_length = 0;
for (var i = 0; i < str.length; i++){
var son_str = str.charAt(i);
encodeURI(son_str).length > 2 ? char_length += 1 : char_length += 0.5;
if (char_length >= len){
var sub_len = char_length == len ? i+1 : i;
return str.substr(0, sub_len);
break;
}
}
}
javascript 输入框监听事件的更多相关文章
- javascript事件有哪些?javascript的监听事件
事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图 ...
- 在Javascript中监听flash事件(转)
在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...
- JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于AngularJs中监听事件及脏循环的理解
可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...
- js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件
页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...
- Vue 为什么在 HTML 中监听事件?
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...
- js监听事件 上滑消失下滑出现的效果 触摸与手势事件
https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...
- js中的监听事件总结
javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event 1.滚动条监听事件 例1:监听滚动条距离页面顶端距离 <scri ...
- vue v-on监听事件
在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...
随机推荐
- 序列式容器————list
list是一个线性双向链表结构,它的数据由若干个节点构成,每一个节点都包括一个信息块(即实际存储的数据).一个前驱指针和一个后驱指针. 它无需分配指定的内存大小且可以任意伸缩,这是因为它存储在非连续的 ...
- Spring Boot教程(一)在springboot中用redis实现消息队列
环境依赖 创建一个新的springboot工程,在其pom文件,加入spring-boot-starter-data-redis依赖: <dependency> <groupId&g ...
- maven工程项目与项目之间的依赖方式
首先看一下项目结构: 1.需要在父工程中把子工程为坐标引进来,同时标注父工程为pom工程: 2.同时在父工程中把子工程当作一个模块引进来 3.需要在每一个子项目中通过parent标签,标注 ...
- 简单地使用webpack进行打包
之前写的有些零散,现在一步步再重新写.记住: 如果你步骤对,但是始终没成功, 那么请不要烦心, 因为webpack版本4以上, 语义更加严格,命令有一些已经发生改变了,所以并不是你的问题! 一.确保已 ...
- PHP mac localhost 环境下发送邮件
转载自:http://mabblog.com/blog/2011/09/lion-smtp-postfix-relay-and-dreamhost/ When developing web-apps ...
- Integer类源码浅析
1.首先Integer提供了两类工具类,包括把一个int类型转成二进等, 其实执行转换算法只有一个方法: public static String toString(int i, int radix) ...
- shell命令别名
~/.bashrc文件 [root@linuxzgf ~]# vi ~/.bashrc 在alias cp='cp -i'前加上"#"注释,重新登录即可实现复 ...
- 2018-2019-2-20175225 实验四《Android开发基础》实验报告
一.实验报告封面 课程:Java程序设计 班级:1752班 姓名:张元瑞 学号:20175225 指导教师:娄嘉鹏 实验日期:2019年5月14日 实验时间:13:45 - 21:00 实验序号:实验 ...
- QBXT Day 5图论相关
图论是NOIP的一个非常重要的考点,换句话说,没有图论,NOIP的考纲就得少一大半(虽然很NOIP没有考纲) 图论这玩意吧,和数论一样是非常变态的东西,知识点又多又杂,但是好在一个事,他比较直观比较好 ...
- 软件-客户端管理工具-SourceTree:百科
ylbtech-软件-客户端管理工具-SourceTree:百科 SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端管理工具,同时也是Mn版本控制系统工具 ...