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

原创 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;
}

苹果底部菜单效果实现

关于苹果底部效果,一般人肯定不会陌生,由于该效果不止在苹果电脑上出现,在很多网站都运用到了该效果.效果看起来还是比较酷炫的,当鼠标移动过去时,会发现对应的菜单会出现放大的效果.图片展示: ...
  • qq545698514
  • qq545698514
  • 2016年12月29日 19:59
  • 431

基于Jquery实现苹果开关按钮特效的插件

默认使用 $.switch() 调整大小 $.switch({ target:'.biggerSwitch', height:200 }) $.switch({ ...
  • qq_27224627
  • qq_27224627
  • 2018年01月11日 14:56
  • 35

移动端页面在苹果手机中需要主要的问题

遇到一个问题写一个: 1、 在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10-21') 的日期对象。  ...
  • xlei1123
  • xlei1123
  • 2016年09月29日 17:30
  • 166

Iphone实现Loading效果

我们在实际的开发中,经常会加载数据,用户需要等待加载的过程,往往在这一段时间要告送用户正在加载数据,经常用loading的效果来实现. 实现效果如下: 实现的具体代码: 类的声明: #impor...
  • u011741233
  • u011741233
  • 2013年08月19日 18:19
  • 790

手机号码归属地最新数据库2015年3月(附带采集更新程序)

转载 http://www.duanmu.org/log/mobile/ 手机号码归属地最新数据库2015年3月(附带采集更新程序) Written By 木头 On 2011, No...
  • silenceshining
  • silenceshining
  • 2015年05月05日 13:07
  • 6238

GridView实现双击进行编辑,更新

虽然标题是原创,但是其实主要的思想呢还是接见了晓风残月的思路,今天在晓风残月的博客上看到了如何利用GridView来实现双击进行编辑。我决定动手实现一下,由于还没有实现双击进行更改操作,所以顺便就把这...
  • oyjd614
  • oyjd614
  • 2007年09月24日 18:45
  • 3007

(新)苹果上架条款

1.使用条款 1.1为App Store应用开发者,您必须遵守 ProgramLicenseAgreement(PLA)、人机交互指南(HIG)以及您和苹果签订的任何其他协议与合同。以下规则和案例旨在...
  • u012411480
  • u012411480
  • 2016年06月04日 10:54
  • 697

用CSS3实现类似苹果桌面的有趣抖动效果

代码逻辑非常简单,使用css3的tranform的rotate属性让制定元素向左右倾斜5度。并且按照100毫秒的间隔交替切换。  初步实现了抖动的效果。大家可以自己试试。...
  • tiimfei
  • tiimfei
  • 2011年09月11日 22:14
  • 2841

iOS类似墙纸透视效果UIInterpolatingMotionEffect

在读MBProgressHUD时,发现有个叫做UIInterpolatingMotionEffect的效果,一直在用这个框架,还真没注意过有这种动画.当你手机在摇晃的时候,那个遮罩是会上下左右摆动的....
  • u011063706
  • u011063706
  • 2017年06月09日 21:54
  • 419

android仿苹果SwitchButton效果的实现

1.新建一个类,类名就是SwitchButtonimport android.content.Context; import android.graphics.Bitmap; import andro...
  • qq_28766327
  • qq_28766327
  • 2016年03月30日 22:09
  • 1157
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现苹果手机号码编辑效果
举报原因:
原因补充:

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