给input框绑定input监听事件后，再次调用函数时，函数中给input框绑定的keydown事件与input事件发生冲突了?
给input框绑定input监听事件后，再次调用函数时，函数中给input框绑定的 keydown事件与input事件发生冲突了?
($(function(){
//算出最大年份和最小年份
var i;
var date =[-1,-1,-1,-1,-1,-1,-1,-1];
var valReplace;
var yearStar = 0;
var yearCount = 4;
var monthStar = yearCount+yearStar+1;
var monthCount =2;
var dayStar = monthCount+monthStar+1;
var dayCount = 2;
var nowYear = new Date().getFullYear();
var nowYearNum = parseInt(nowYear);
var maxYear = nowYearNum-150;
var minYear = nowYearNum+120;
var maxMonth = "12";
var minMonth = "01";
var maxDay = "31" ;
var minDay = "01";
var pos;
var adds;
var gCp;
// console.log($.type(maxYear))
//获取光
$.fn.getCursorPosition = function() {
var el = $(this).get(0);
var pos = 0;
if ('selectionStart' in el) {
pos = el.selectionStart;
} else if ('selection' in document) {
el.focus();
var Sel = document.selection.createRange();
var SelLength = document.selection.createRange().text.length;
Sel.moveStart('character', -el.value.length);
pos = Sel.text.length - SelLength;
}
return pos;
}
//鼠标悬浮，改变placeholder的颜色
$(".m-date").mousemove(function(){
$(this).attr('placeholder','yyyy年mm月dd日');
$(this).addClass('m-input');
}).mouseout(function(){
$(this).attr('placeholder','出生日期');
$(this).removeClass('m-input');
});
//当鼠标焦点聚集时，增加value值
$(".m-date").focus(function(){
$(this).val("yyyy年mm月dd日");
//当值改变是添加监听事件
$(".m-date").on('input',function(){
var inputVal=$(".m-date").val();
//重新获取value的值
var addss;
var gCp=$(".m-date").getCursorPosition();//获取光标的位置
var maxF =parseInt(maxYear.toString().substring(yearStar,gCp))
var minF =parseInt(minYear.toString().substring(yearStar,gCp))
var maxM =parseInt(maxMonth.substring(0,gCp-5))
var minM =parseInt(minMonth.substring(0,gCp-5))
var adds = inputVal.split("");
// 位数分配
if(yearCount+monthCount+dayCount != date.length){
return false;
}
//判断光标的下标
function positionToIndex(){
var yearCursor = 0;
var monthCursor =6;
var dayCursor = 9;
if(gCp>yearCursor&&gCp<=yearCursor+yearCount){
return gCp-1;
}
if(gCp>=monthCursor&&gCp<=monthCursor+monthCount){
return gCp-2;
}
if(gCp>=dayCursor&&gCp<=dayCursor+dayCount){
return gCp-3;
}
}
var pos=positionToIndex();
var addss =adds[gCp-1] ;
date .splice(pos,1,addss);
valReplace=inputVal.substring(gCp,gCp+1);
//是否可输入年
if(gCp>yearStar&&gCp<=yearCount+yearStar){
valReplaceS=parseInt(inputVal.substring(yearStar,gCp))
//遍历光标前面的值是否为-1
for(i=yearStar;i<=pos;i++){
if( date[i]==-1){
$(".m-date").val("yyyy年mm月dd日");
$(".m-date").setCursorPosition(0);
return false
}
};
//判断值是否符合
if( valReplaceS>= maxF && valReplaceS <= minF){
adds.splice(gCp,1);
// console.log( adds);
$(".m-date").val( adds.join(""));
if(gCp>=0&&gCp<4){
$(".m-date").setCursorPosition(gCp);
}else if(gCp==4){
$(".m-date").setCursorPosition(gCp+1);
}
}else{
adds.splice(gCp-1,1);
$(".m-date").val( adds.join(""));
$(".m-date").setCursorPosition(gCp-1);
}
//按下删除键是触发函数
deleTe(gCp,adds,"y");
//判断是否可输入月
}else if(gCp>=monthStar&&gCp<=monthCount+monthStar){
valReplaceS=parseInt(inputVal.substring(monthStar,gCp))
console.log(gCp);
//遍历光标前面的值是否为-1
for(i=monthStar-1;i<=pos;i++){
if( date[i]==-1){
$(".m-date").val("yyyy年mm月dd日");
$(".m-date").setCursorPosition(0);
return false
}
};
//判断值是否符合
if(valReplaceS>= minM&&valReplaceS<=maxM) {
adds.splice(gCp,1);
// console.log( adds);
$(".m-date").val( adds.join(""));
//光标在月的地方，自动跳到下一个位置
if(gCp>=0&&gCp<7){
$(".m-date").setCursorPosition(gCp);
}else if(gCp==7){
$(".m-date").setCursorPosition(gCp+1);
}
}else{
adds.splice(gCp-1,1);
// console.log( adds);
$(".m-date").val( adds.join(""));
$(".m-date").setCursorPosition(gCp-1);
}
//是否可输入日
}else if(gCp>=dayStar&&gCp<=dayCount+dayStar){
valReplaceS=parseInt(inputVal.substring(dayStar,gCp));
//遍历光标前面的值是否为-1
for(i=dayStar-2;i<=pos;i++){
if( date[i]==-1){
$(".m-date").val("yyyy年mm月dd日");
$(".m-date").setCursorPosition(0);
return false
}
};
var maxD = parseInt(maxDay.substring(0,gCp-8));
console.log(maxD);
var minD = parseInt(minDay.substring(0,gCp-8));
//判断值是否符合
if(valReplaceS>=minD&&valReplaceS<=maxD) {
adds.splice(gCp,1);
// console.log( adds);
$(".m-date").val( adds.join(""));
if(gCp>=0&&gCp<10){
$(".m-date").setCursorPosition(gCp);
}else if(gCp==10){
$(".m-date").setCursorPosition(gCp+1);
}
}else{
adds.splice(gCp-1,1);
// console.log( adds);
$(".m-date").val( adds.join(""));
$(".m-date").setCursorPosition(gCp-1);
}
}
});
});
function deleTe (gCl,abb,q){
var flag = true;
$(".m-date").on("keydown", function keyDown(event) {
var k = event.keyCode ;
if(k ==8||k ==46){
abb.splice(gCl-1,1,q)
$(".m-date").val( abb.join(""));
$(".m-date").setCursorPosition(gCl-1);
}
if(flag){
$(".m-date").unbind("keydown");
flag = false;
}
});
}
}));html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>日期插件</title>
<link rel="stylesheet" type="text/css" href="../../css/date/date.css">
</head>
<body>
<div class="m-box">
<div class="m-content">
<input type="text" name="m-date" placeholder="出生日期" id="m-date" class="m-date">
</div>
</div>
<script src="../../js/commen/jquery-3.2.1.min.js"></script>
<script src="../../plugin/date/dateplug.js"></script>
<script src="../../js/date/date.js"></script>
</body>
</html>移动光标的插件
//SET CURSOR POSITION
$.fn.setCursorPosition = function(pos) {
this.each(function(index, elem) {
if (elem.setSelectionRange) {
elem.setSelectionRange(pos, pos);
} else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
});
return this; };如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
去多看下文档吧，input事件可以实时监听然后执行回调，与此同时你绑定了keydown，当键盘按键起来的时候，文本域的值发生了变化，不冲突才怪。。。