javascript 输入框监听事件
2024-09-06 06:32:03
<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;
}
}
}
最新文章
- bzoj1039: [ZJOI2008]无序运动Movement
- SSE and Websocket
- Theano2.1.18-基础知识之theano的扩展
- [ASE][Daily Scrum]11.13
- Nginx 笔记与总结(3)配置虚拟主机
- 使用Topshelf 5步创建Windows 服务 z
- [置顶] linux第二天,g++,gcc,ps,cat,sort,grep,kill,less,ls -l ,
- C++ primer学习记录(个人猜想未测试版本)
- Confluence 6 数据库表-内容(Content)
- labelme连续将文件夹中的json文件进行可视化的指令
- 元数据管理器中存在错误。 实例化来自文件“\\?\C:\Program Files\Microsoft SQL Server\MSAS11.MSSQLSERVER\OLAP\Data\Tfs_Analysis.0.db\vDimTestCaseOverlay.874.dim.xml”的元数据对象时出错。
- python字符串魔法
- Linux 流量监控工具 iftop
- poi实现百万级数据导出
- 两条线段求交点+叉积求面积 poj 1408
- POJ 2135 Farm Tour (网络流,最小费用最大流)
- 1200 同余方程 2012年NOIP全国联赛提高组
- Android——开机启动功能(Service和BroadcastReceiver)
- Unity Shader 设置纹理采样tex2D过滤方式
- 如何将word中的图片和文字导入自己的博客中