饥人谷_李栋
1.阻止input表单自动填充
2.离开或刷新页面 js跳出弹框
3.导航栏下拉菜单 点击div 不消失 ，点击document div 消失
4.跳转到指定的邮箱登录页面
5.页面中iframe内容相互调用
6.select 实现多选change监听
7.移动端访问pc页面自动跳转
8.IOS把数字渲染为电话号码，颜色为蓝色
一、阻止input表单自动填充
- input添加属性
autocomplete="off"// chrome和firefox不兼容 - 如果同时有
usename+password的话可以改变password的type值为text 当获得焦点的时候改为password - 为了确保效果 最好监听
focus事件
二、离开或刷新页面 js跳出弹框
window.onbeforeunload = function(event) {
event.returnValue="已自动保存"+datae+"时的内容";
}
不提示
window.onbeforeunload = function(event) {
return;
}
三、点击div 不消失 ，点击document div 消失
<div style="position:relative">
<input type="button" value="asljdlaskjdf">
<ul style="position:absolute; top:20px; left:0px; border:1px solid red; height:100px; overflow:scroll;overflow-x:hidden; display:none">
<li>123312312</li>
<li><label><input type="radio" name="asdf" id="">asdfasdfadfasdf</label></li>
<li><label><input type="radio" name="asdf" id="">asdfasdfadfasdf</label></li>
<li><input type="button" value="aaaa"></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
$("ul,input").click(function(e){
console.log(e)
e?e.stopPropagation():event.cancelBubble = true;
});
$("input").focus(function() {
$("ul").show();
});
$(document).click(function() {
$("ul").hide();
});
})
</script>
四、跳转到指定的邮箱登录页面
$("#gomail").click(function () {
//var uurl = $("input.hide_email").val();
//获得哈希值
var hashStrings = (window.location.hash.length > 0 ? window.location.hash.slice(1) : "");
var uurl = gotoEmail(hashStrings);
if (uurl != "") {
window.open("http://"+uurl);
} else {
console.log("抱歉!未找到对应的邮箱登录地址，请自己登录邮箱查看邮件！");
}
});
//功能：根据用户输入的Email跳转到相应的电子邮箱首页
function gotoEmail($mail) {
$t = $mail.split('@')[1];
$t = $t.toLowerCase();
if ($t == '163.com') {
return 'mail.163.com';
} else if ($t == 'vip.163.com') {
return 'vip.163.com';
} else if ($t == '126.com') {
return 'mail.126.com';
} else if ($t == 'qq.com' || $t == 'vip.qq.com' || $t == 'foxmail.com') {
return 'mail.qq.com';
} else if ($t == 'gmail.com') {
return 'mail.google.com';
} else if ($t == 'sohu.com') {
return 'mail.sohu.com';
} else if ($t == 'tom.com') {
return 'mail.tom.com';
} else if ($t == 'vip.sina.com') {
return 'vip.sina.com';
} else if ($t == 'sina.com.cn' || $t == 'sina.com') {
return 'mail.sina.com.cn';
} else if ($t == 'tom.com') {
return 'mail.tom.com';
} else if ($t == 'yahoo.com.cn' || $t == 'yahoo.cn') {
return 'mail.cn.yahoo.com';
} else if ($t == 'tom.com') {
return 'mail.tom.com';
} else if ($t == 'yeah.net') {
return 'www.yeah.net';
} else if ($t == '21cn.com') {
return 'mail.21cn.com';
} else if ($t == 'hotmail.com') {
return 'www.hotmail.com';
} else if ($t == 'sogou.com') {
return 'mail.sogou.com';
} else if ($t == '188.com') {
return 'www.188.com';
} else if ($t == '139.com') {
return 'mail.10086.cn';
} else if ($t == '189.cn') {
return 'webmail15.189.cn/webmail';
} else if ($t == 'wo.com.cn') {
return 'mail.wo.com.cn/smsmail';
} else if ($t == '139.com') {
return 'mail.10086.cn';
} else {
return '';
}
}
五、页面中iframe内容相互调用
父页面调用子页面
$("#iframe1").contents().find('.ws-opens').hide();
子页面调用父页面
parent.document.getElementById("iframe1").style.height = "1960px";
点击iframe里的元素，父元素弹窗
在父页面里放弹窗的DOM结构 以及可以调用弹窗的函数function a,
子页面的元素监听事件来调用父元素的函数 parent.a()
注：这里需要注意的是，最好调用的目标有一个id值，链式操作不支持
六、select 实现多选change监听
这里我用了一个比较笨的方法
amazeUI 的多选组件
因为位置比较挤，没有确当按钮的位置
我的思路是：过2s后判断select的value值是不是相等；
在写延迟执行的时候，由于setTimeout函数不支持值传入，网上一堆方法，都无法实现，用的全局的变量来存放value，当然欢迎有过同样需求的童鞋指正..
var other, values,num = 0;
function foo() {
//console.log(Boolean(other));
//console.log(Boolean(values));
if(Boolean(other)){
other=other.toString();
} //数组比较es5需要toString()，而null没有toString方法
if(Boolean(values)){
values.toString();
}
if (other == values) {
.... }
}
$("#table select").on("change", function () {
if (num == 0) {
values = $(this).val();num++
}
var time = setTimeout(function () {
other = $("#table select").val();
foo();
num = 0}, 2000);});
七、移动端访问pc页面自动跳转
!(function(){
if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
console.log(2);
var hash=window.location.hash;
window.location.href = 'index_mobile.html'+hash;
} else { console.log(" PC页面")}
})();
八、IOS把数字渲染为电话号码，颜色为蓝色
head中添加meta
<meta name="format-detection" content="telephone=no">
