实现苹果手机号码编辑效果

原创 2015年07月08日 15:15:03

原本是用jquery写的,这里只有关键代码,没写id为phone的输入框

$("#phone").on("keyup", function(e) {//用电脑shift加方向无法选取文本,手机上无此操作,不管了。粘贴后焦点位置不对

var cursortPosition = getCursortPosition(this);
var phone = decrPhone(this.value);
//var selectText = getSelectText();
/*if(selectText){//有选中内容时

}*/
//if(e.keyCode < 48)//输入非字符
// cursortPosition--;
if (phone.length >= 9) {


this.value = encrPhone(phone);
if (phone.length == 9) {
if (e.keyCode == 8 || cursortPosition < 3)
setCaretPosition(this, cursortPosition);
else if (cursortPosition < 8)
setCaretPosition(this, cursortPosition + 1);
else
setCaretPosition(this, cursortPosition + 2);
} else
setCaretPosition(this, cursortPosition);
} else {
this.value = phone;
if (phone.length == 8) {
if (e.keyCode != 8 || cursortPosition < 4)
setCaretPosition(this, cursortPosition);
else if (cursortPosition < 9)
setCaretPosition(this, cursortPosition - 1);
else
setCaretPosition(this, cursortPosition - 2);
} else
setCaretPosition(this, cursortPosition);
}
});


/**获取真实号码*/
function decrPhone(phone) {
return phone.replace(/-+/g, "");
}
/**加密号码*/
function encrPhone(phone) {
var newPhone = "";
if (phone.length >= 9) {
for ( var i = 0; i < phone.length; i++) {
newPhone += phone[i];
if (i == 2 || i == 6) {
newPhone += "-";
}
}
return newPhone;
} else {
return phone;
}
}


/*$(function() {
 $("#txt").click(function() {
 var position = 0;
 var txtFocus = document.getElementById("txt");
 if ($.browser.msie) {
 var range = txtFocus.createTextRange();
 range.move("character", position);
 range.select();
 }
 else {
 //obj.setSelectionRange(startPosition, endPosition);
 txtFocus.setSelectionRange(position, position);
 txtFocus.focus();
 }
 });
 });*/
//1.获取光标位置
function getCursortPosition(ctrl) {// 获取光标位置函数
var CaretPos = 0; // IE Support
if (document.selection) {
ctrl.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -ctrl.value.length);
CaretPos = Sel.text.length;
} // Firefox
// support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
//2.设置光标位置
function setCaretPosition(ctrl, pos) {// 设置光标位置函数
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
} else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
//获取文本框选中值
function getSelectText() {
var content;
if (document.all) {
content = document.selection.createRange();
} else {
content = window.getSelection();
content.text = content.toString();
}
var str = content.text;// 选择的内容
return str;
}

相关文章推荐

手机号码抽奖js效果

  • 2009年12月09日 12:32
  • 2KB
  • 下载

HTML5仿苹果手机的面板合拢折叠效果

这是一个HTML5折叠菜单,但更像是一个折叠面板,仿苹果手机的passbook应用中的代码例子,请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单,觉得这一个从形式上来说,是挺像的。 ...

手机号码归属地查询C程序实现

  • 2008年03月30日 22:30
  • 429KB
  • 下载

利用PHP实现手机号码归属地查询程序

最近公司要求在进行注册时能够对输入手机号码归属地进行自动判断,经过在网上的查找,发现提供手机号码归属地查询类似的接口不少,最后找到一个比较简单实用的接口,是由手机在线提供的。 该网站提供的接口包括如...

Ajax实现手机号码查询

  • 2008年10月22日 12:54
  • 503KB
  • 下载

iOS开发(OC)——手机号码,邮箱,网址等正则表达式的实现

首先是公共的方法+(BOOL)predictTargetString:(NSString *)targetString AndExpression:(NSString *)regularExpress...

c#实现手机号码归属地查询

  • 2011年10月06日 23:34
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现苹果手机号码编辑效果
举报原因:
原因补充:

(最多只允许输入30个字)