<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 输入框监听事件的更多相关文章

  1. javascript事件有哪些?javascript的监听事件

    事件类型: 1.界面事件 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload window.onload = function(){ //代表图 ...

  2. 在Javascript中监听flash事件(转)

    在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...

  3. JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 关于AngularJs中监听事件及脏循环的理解

    可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...

  5. js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件

    页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...

  6. Vue 为什么在 HTML 中监听事件?

    为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...

  7. js监听事件 上滑消失下滑出现的效果 触摸与手势事件

    https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...

  8. js中的监听事件总结

    javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event 1.滚动条监听事件 例1:监听滚动条距离页面顶端距离 <scri ...

  9. vue v-on监听事件

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下 ...

随机推荐

  1. pandas读取大文件时memoryerror的解决办法

    再用pd.read_csv读取大文件时,如果文件太大,会出现memoryerror的问题. 解决办法一:pd.read_csv的参数中有一个chunksize参数,为其赋值后,返回一个可迭代对象Tex ...

  2. PCL智能指针疑云 <三> 智能指针作为函数的传值参数和传引用参数

    一 函数的参数传递可以简单分类为“传值”和“传引用”. 声明函数时,形参带引用“&”,则函数调用时,是把实参所在的内存直接传给函数所开辟的栈内存.在函数内对形参的修改相当于对实参也进行修改. ...

  3. PISCES: A Programmable, Protocol-Independent Software Switch

    Name of article:PISCES: A Programmable, Protocol-Independent Software Switch Origin of the article:S ...

  4. Springboot application 本地HTTPS配置

    使用keytool 命令,生成一个数字证书: keytool -genkey -alias tomcathttps -keyalg RSA -keysize 2048 -keystore key.p1 ...

  5. 文件的权利和sudoers中规定的权限哪个更大?

    文件的权利和sudoers中规定的权限哪个更大? 当然是文件的权限更大!!! 这也是linux的 更安全的根本所在! 就是它的每一个文件都有严格的 rwxr--r-- 权限规定. 只有文件权限规定了的 ...

  6. 如何将EDM数据分类工作做的更加真善美

    众所周知,数据是互联网时代营销的决定性因素,数据的好坏关乎到营销能力的强弱,而细化到EDM行业中,数据细分变得极为重要,根据数据形态的不同,将会涉及到多种不同的细分方法,有效的利用这些方法,将会大大的 ...

  7. web开发中会话跟踪的方法有哪些

    会话跟踪就是浏览器和服务器通信 1.cookie 2.session 3.隐藏input 4.url重写 5.ip地址

  8. java数字加密算法

    数字加密在项目中时常会遇到,如手机号,身份证号信息等,下面小白将自己手写的数字加密算法分享给大家,可在项目中直接运用.加密规则,入参时传递一个字段时间戳 time:* 1.以字母代替数字,0-9分别为 ...

  9. 合理设置redis主从buffer 不错

    背景 某次抢购时,一个redis集群的某个分片,从实例响应时间陡增到几十秒,报警后运维将其中一个本应该下线的slave下掉,问题减轻但没有解决,又把另一个正常的slave下线掉,问题消失. maste ...

  10. Vijos lxhgww的奇思妙想--求K级祖先

    给出一棵树求K级祖先.O(N*logN+Q) 更详细的讲解见:https://www.cnblogs.com/cjyyb/p/9479258.html /* 要求k级祖先,我们可以把k拆成" ...