记录工作中遇到查到的解决方案
目录
1.聊天输入框输入之后,回车提交,回车往下一行的解决方案
2.页面要关闭时弹出这个对话框,确定离开,取消继续
3.//捕获异常及处理
4.keyup 可以代替/input事件监听...
5.判断是不是数组 http://www.cnblogs.com/mofish/p/3388427.html
6.没有
7.(获取url后带的参数值)用正则表达式来获取window.location.href(网址)后带的参数
8.正则判断是否为IE
9.滚动条高度
10.全版本兼容的输入框监听
11.JQ的事件监听,不支持老版IE
12.多行文字用rem 在安卓机上字体会变大显示
13.【ajax】readyState=4并且status=200时，还进error方法
14.正则表达式 replace 方法中 后面加function的方法IE6 - 7不兼容.但兼容不写这种的方法
15.字符转换 发送消息的时候
16.判断今天是星期几
17.数字保存小数点后两位
18.vue改变DOM后执行 (因为数据更新后暂时未改变DOM,所以有些事件涉及到DOM的不会发生,因此使用延迟做处理)
19.移动端 ios 不支持 日期格式 "2017-2-18" 只支持 "2017/2/18" 如果是前一个会报错,报的是 invalid date
20.JAVA input的type为submit时 会跳转页面提交代码不会走ajax
21. 发送AJAX 的时候,可以事先定义个变量 data 然后直接赋值给 ajax这样可以做到修改一个地方,全局改变 或者弄个数组存储所有的date 请求地址也是一个数组
22.页面跳转,刷新,关闭的各种方法
23. 为什么使用正则test( )第一次是 true,第二次是false？
24. AJAX锚点
25.限制文字输入字数超出
26.拦截ctrl+s 保存编辑
27 JAVA incloud 页面
28.阻止Zepto冒泡事件
29.maxlength
30.writing-mode 让文字竖排
31.IE 鼠标锁定 setCapture
32.a.filter(x => b.indexOf(x) == -1).concat(b.filter(x => a.indexOf(x) == -1)) 找出数组var a = [1,2,3]; var b = [8,7,6,5,4,3,2,1]; 不同的值
33.数组去重
34. || 的用法 与 三目运算
35.数组排序
36.input的type状态为number时解决maxlength无效的问题
37.使用html2canvas实现浏览器截图 http://www.cnblogs.com/yanweidie/p/5203943.html
38.解决ios键盘事件 ==> 点击屏幕外除了键盘的时候,键盘不消息的情况
39 元素上下居中(未测试)
40.window的扩展方法,类型setTimeout
42. js 获取浏览器版本信息（全） http://blog.csdn.net/qq_16559905/article/details/51746330
43.for in 循环走的是系统的array prototype 对于 对array的扩展有可能会失效
44.var e = event || window.event || arguments.callee.caller.arguments[0]; (监听键盘上的按键事件<任何按键>)
45,监听全局事件，删除全局事件
46.兼容方法判断滚动条是否到底部
47.获取滚动条高度，兼容版
48.苹果高清屏存在1像素滚动条不滚动的问题 <记录一下，label标签里面套A标签，点击label的时候，因为阻拦了默认事件，而A标签宽度不够，导致程序不滚动 - - 2017-11-16日解决，提出解决方案者：现前端组长 肖燊>
49.事件监听，删除事件监听
50.取除了某种符号外的其它字符，比如获取网址“？”问号左右两侧字符串(包含一道活动正则的题目<var x = "www.zhidao.baidu.com" //问题，把所有的点换成 / 反斜杠>)
51.判断是否为移动端,根据不同需求跳到不同的地址
52. 设定不同的dpr有不同的大小 [data-dpr="2"] div{ } [data-dpr="3"] div{ }
53.获取select被选中的值及value
54./防止页面后退(可禁止浏览器后退按钮)
55.textarea高度自适应
==========================================================================
1.聊天输入框输入之后,回车提交,回车往下一行的解决方案
//按键发送消息
function onTextareaKeyDown(ev) {
var event=ev||window.event;
if (event.keyCode == 13) {
setTimeout(function(){
rightMessage();
},0);
}
e.preventDefault ? e.preventDefault() : (e.returnValue = false); //此为解决方案
}
//兼容火狐版本(全兼容的event.keyCode代码,经测试)
//按键发送消息
function onTextareaKeyDown(event) {
//var event=ev||window.event;
var event=arguments.callee.caller.arguments[0]||window.event;//消除浏览器差异
if (event.keyCode == 13) {
setTimeout(function(){
rightMessage();
},0);
}
};
在<textarea>上这么调用
<textarea id="messageBody" onkeydown="onTextareaKeyDown()"></textarea>
2. window.onbeforeunload=function(){
return "您确定离开网络问诊页面吗？"; } 在页面要关闭时弹出这个对话框,确定离开,取消继续
3.//捕获异常及处理
try{
throw ("error");
}catch(error){
if(error == "error"){
console.log("出错了");
}
}
4.keyup 可以代替/input事件监听...
5.判断是不是数组 http://www.cnblogs.com/mofish/p/3388427.html
function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
var a=[];
(a.constructor == Array)
var b={};
(a.constructor == Object)
7.
function getQueryString(name, decode = true) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if (r != null) return decode ? decodeURIComponent(r[2]) : r[2];
return null;
}
用正则表达式来获取window.location.href(网址)后带的参数(顺带中文转码)
8.判断是否为IE
if("\v"=="v") {
alert("IE");
}else{
alert("NO");
}
9.滚动条高度
这两天在写一个JS的网页右键菜单，在实现菜单定位的时候发现了这个问题：chrome居然不认识document.documentElement.scrollTop！
看前辈们的文章，纷纷表示如果有文档声明（即网页第一句的docType）的情况下，标准浏览器是只认识documentElement.scrollTop的，但chrome虽然我感觉比firefox还标准，但却不认识这个，在有文档声明时，chrome也只认识document.body.scrollTop.
由于在不同情况下，document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值，那到底网页的scrollTop值怎么得到呢？难道又要用JavaScript进行判断？
其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候，document.documentElement.scrollTop就会始终为0；反之亦然。所以，如果要得到网页的真正的scrollTop值，可以这样：
var sTop=document.body.scrollTop+document.documentElement.scrollTop;
这两个值总会有一个恒为0，所以不用担心会对真正的scrollTop造成影响。一点小技巧，但很实用。
10.全版本兼容的输入框监听
function immediately(){
var element = document.getElementById("messageBody");
if("\v"=="v") {
//alert("ie");
element.onpropertychange = webChange;
}else{
//alert("非ie");
element.addEventListener("input",webChange,false);
}
}
function webChange(){
if($("#messageBody").val().length > 0){
$("#sendMessage").removeClass("noSend");
}else{
$("#sendMessage").addClass("noSend");
};
};
11.JQ的事件监听,不支持老版IE
/*监听文字发送输入框*/
$(document).on('input propertychange',"#messageBody", function(){
if($("#messageBody").val().length > 0){
$("#sendMessage").removeClass("noSend");
}else{
$("#sendMessage").addClass("noSend");
};
});
12.多行文字用rem 在安卓机上字体会变大显示
var re=/&|%|\+/g;
var test=str.replace(re,function(aStr){
for(var i=0;i<aStr.length;i++){
switch(aStr[i]){
case "%" : return aStr[i]="%25"; break;
case "&" : return aStr[i]="%26"; break;
case "+" : return aStr[i]="%2B"; break;
default:
return "转换错误";
}
}
})
return test;
15.字符转换 发送消息的时候
trimQb:function(str){
var st=str.toString();
st = st.replace(/%/g, "%25");
st = st.replace(/&/g, "%26");
st = st.replace(/\+/g, "%2B");
st = st.replace(/\\/g,"%5C%5C");
st = st.replace(/"/g, "\\%22");
var text = st;
return text;
}
接收
var re=/\\\\/g;
var re1=/\\"/g;
var messageBody2 = messageBody.replace(re1,"\"");
var messageBody1 = messageBody2.replace(re,"\");
16.判断今天是星期几
function getMyDay(date){
var week;
if(date.getDay()==0) week="周日"
if(date.getDay()==1) week="周一"
if(date.getDay()==2) week="周二"
if(date.getDay()==3) week="周三"
if(date.getDay()==4) week="周四"
if(date.getDay()==5) week="周五"
if(date.getDay()==6) week="周六"
return week;
}
var w1 = getMyDay(new Date("2017-2-15"));
17.数字保存小数点后两位
var x=12.334;
x.toFixed(4)
18.vue改变DOM后执行 (因为数据更新后暂时未改变DOM,所以有些事件涉及到DOM的不会发生,因此使用延迟做处理)
作者：cyni
链接：https://www.zhihu.com/question/50879936/answer/123125629
来源：知乎
著作权归作者所有，转载请联系作者获得授权。
接着我查了很多国外的技术blog,终于找到了解决方案，原来想要IOS5中的Safari能正确解析new Date()那么必须这么写
new Date('2013/10/21');
20 JAVA
21. 发送AJAX 的时候,可以事先定义个变量 data 然后直接赋值给 ajax这样可以做到修改一个地方,全局改变 或者弄个数组存储所有的date 请求地址也是一个数组
这样可以做到动态改变所有.... 如果接口换掉了,或者说接口修改了,(重写个接口的js,然后直接引入)直接替换个js,全局修改.
var data = [];
data.push({ name: "userLoginId", value: userLoginId });
data.push({ name: "pageData", value: JSON.stringify(pageDataSelf) });//查询数据时 MATERNAL_ID 作为参数
try {
$.ajax({
type: "GET",
data: data,
cache: false,
dataType: "jsonp",
jsonp: "callbackparam",
url: zd.urls.FamilyTreeFamilyImgSearch,
22.
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href
这几个都可以刷新
window.location.reload();刷新
window.location.href=window.location.href;刷新
window.close();关闭窗口，不弹出系统提示，直接关闭
window.close()相当于self属性是当前窗口
window.parent.close()是parent属性是当前窗口或框架的框架组
页面实现跳转的九种方法实例：
<html>
<head>
<meta http-equiv="Content-Type" content="text
<title>navigate</title>
<script language="JavaScript">
setTimeout('window.navigate("top.html");',2000);
setTimeout('window.document.location.href="top.html";',2000);
setTimeout('window.document.location="top.html";',2000);
setTimeout('window.location.href="top.html";',2000);
setTimeout('window.location="top.html";',2000);
setTimeout('document.location.href="top.html";',2000);
setTimeout('document.location="top.html";',2000);
setTimeout('location.href="top.html";',2000);
setTimeout('location.replace("top.html")',2000);
//window对象
//document对象
//location对象
//href属性
//1.window.document.location.href
//2.window.document.location
//3.window.location.href
//4.window.location
//5.document.location.href
//6.document.location
//7.location.href
//8.window.navigate
//9.location.replace
//只要使用location方法，和任意的window对象，location对象，href属性连用，都可以页面的跳转////
</script>
</head>
23. 为什么使用正则test( )第一次是 true,第二次是false？
今天朋友问我一个问题，我现在需要多次匹配同一个内容，但是为什么我第一次匹配，直接是 true，而第二次匹配确实 false 呢？
var s1 = "MRLP";
var s2 = "MRLP";
var reg = /mrlp/ig;
console.log(reg.test(s1));
console.log(reg.test(s2));这时候你会发现，我们在连续使用一个正则匹配其他字符串的时候，第一次匹配是 true，而第二次匹配则是 false。
等等，WHT？我匹配的是 MRLP，而且我还特意加上i 用于不区分大小写，可以为什么第一次可以正常匹配，第二次就不行了呢？
这也就是我今天要跟大家说的，关于 JS 中的 lastIndex。
2. lastIndex
在开始讲解之前，首先先带大家简单回顾一下 JS中正则表达式的使用方式。
JS 中正则表达式的使用方式有两种:
第一种是正则表达式对象的方法，常用方法有两个。
- exec(str) : 检索字符串中指定的值。返回找到的值，并确定其位置
- test(str) : 检索字符串中指定的值。返回 true 或 false
第二种是字符串对象的方法，常用方法有四个。
- match(regexp) : 找到一个或多个正则表达式的匹配
- replace(regexp) : 替换与正则表达式匹配的子串
- search(regexp) : 检索与正则表达式相匹配的值
- split(search) : 把字符串分割为字符串数组
而这些方法和咱们今天所说的 lastIndex 有什么关系呢？
lastIndex 属性用于规定下次匹配的起始位置。
上次匹配的结果是由方法 RegExp.exec( ) 和 RegExp.test( ) 找到的，它们都以 lastIndex 属性所指的位置作为下次检索的起始点。
这样，就可以通过反复调用这两个方法来遍历一个字符串中的所有匹配文本。
而且需要注意，该属性只有设置标志 g才能使用。
既然已经知道这个东西的形成原因，那么解决起来就非常简单了。
3.解决方案
3.1 第一种解决方案
如上面所述，我们 lastIndex 属性必须要设置 g 标签才能使用。
那么我们在匹配的时候，可以根据情况，直接去掉 g 标签就可以啦。
var s1 = "MRLP";
var s2 = "MRLP";
var reg = /mrlp/i;
console.log(reg.test(s1)); //true
console.log(reg.test(s2)); //true setTimeout(function(){
hashChange();
},100); //上来执行一次,为了别的页面跳转回来的时候显示正确页面
window.onhashchange=hashChange;
function hashChange(){
if(!location.hash || location.hash =="#yqq"){
alert("yqq");
}
else if(location.hash =="#ycq"){
alert("ycq")
} else if(location.hash =="#etq"){
alert("etq");
}
}
25.限制文字输入字数超出
<textarea id="aaa" onkeyup="returnLength(10);"></textarea>//使用方法
//定义方法
function returnLength(MaxLength){
var objField = document.getElementById("aaa");
if (objField.value!="")
{
if(objField.value.length>MaxLength)
{
alert("输入的文字长度超过字段限制，只可输入"+MaxLength+"个字");
objField.value=objField.value.substring(0,MaxLength);
objField.focus();
return;
}
}
26.拦截ctrl+s 保存编辑
- function keyDown(e){
- e.preventDefault();
- var currKey=0, e=e||event||window.event;
- currKey = e.keyCode||e.which||e.charCode;
- if(currKey == 83 && (e.ctrlKey||e.metaKey)){
- $('#btn_save').click();
- return false;
- }
- } document.onkeydown = keyDown;
}
27 JAVA incloud 页面
28.阻止Zepto冒泡事件
29.maxlength
textarea 限制最大长度,CSS3属性 不支持IE10以下浏览器
30.writing-mode 让文字竖排
http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/
31.IE 鼠标锁定 setCapture
32.a.filter(x => b.indexOf(x) == -1).concat(b.filter(x => a.indexOf(x) == -1)) 找出数组var a = [1,2,3]; var b = [8,7,6,5,4,3,2,1]; 不同的值
33.数组去重
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());
34. || 的用法 与 三目运算
35.数组排序
var arrDemo = new Array();
arrDemo[0] = 10;
arrDemo[1] = 50;
arrDemo[2] = 51;
arrDemo[3] = 100;
arrDemo.sort(); //调用sort方法后，数组本身会被改变，即影响原数组
alert(arrDemo);//10,100,50,51 默认情况下sort方法是按ascii字母顺序排序的，而非我们认为是按数字大小排序
arrDemo.sort(function(a,b){return a>b?1:-1});//从小到大排序
alert(arrDemo);//10,50,51,100
arrDemo.sort(function(a,b){return a<b?1:-1});//从大到小排序
alert(arrDemo);//100,51,50,10
36.input的type状态为number时解决maxlength无效的问题
<input type="text" maxlength="5" /> 效果ok，当 <input type="number" maxlength="5" />时maxlength失效，长度可以无限输入。
解放方案：
<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />
37.使用html2canvas实现浏览器截图 http://www.cnblogs.com/yanweidie/p/5203943.html
38.解决ios键盘事件 ==> 点击屏幕外除了键盘的时候,键盘不消息的情况
原文地址:http://www.it165.net/pro/html/201404/12672.html
//判断是否为苹果
var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE')!= -1;
// 元素失去焦点隐藏iphone的软键盘
function objBlur(id,time){
if(typeof id != 'string') throw new Error('objBlur()参数错误');
var obj = document.getElementById(id),
time = time || 300,
docTouchend = function(event){
if(event.target!= obj){
setTimeout(function(){
obj.blur();
document.removeEventListener('touchend', docTouchend,false);
},time);
}
};
if(obj){
obj.addEventListener('focus', function(){
document.addEventListener('touchend', docTouchend,false);
},false);
}else{
throw new Error('objBlur()没有找到元素');
}
}
if(isIPHONE){
var input = new objBlur('input');
input=null;
}
39 元素上下居中(未测试)
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
- <style>
- <!--
- * {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- -->
- </style>
42. js 获取浏览器版本信息（全） http://blog.csdn.net/qq_16559905/article/details/51746330
43.for in 循环走的是系统的array prototype 对于 对array的扩展有可能会失效
45,监听全局事件，删除全局事件 地址：http://blog.csdn.net/wl110231/article/details/7597143
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
alert(this.id);
}, false);
原因：删除监听不支持匿名函数
react用的时候，方法后面不要加括号
var btn = document.getElementById("myBtn");
var handler = function () {
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); //有效！
react调用：
document.addEventListener('touchmove',_this.returnMr,false);
document.removeEventListener('touchmove',_this.returnMr,false);
returnMr(event){
event.preventDefault();
}
46.
1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop
2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement，未声明的情况下用body
这里之前有误， document.compatMode 可以用来判断是否声明了DTD， 值为"BackCompat"：未声明，值为"CSS1Compat"：已声明。
所以，判断滚动条是否已拉到页面最底部，可以用如下代码
window.onscroll = function (){
var marginBot = 0;
if (document.compatMode === "CSS1Compat"){
marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop) -
document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight - document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}
47. var scroll_top = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
或者 var scroll_top = document.documentElement.scrollTop + document.body.scrollTop;
48.苹果高清屏存在1像素滚动条不滚动的问题
解决方案为 % 取余判断如果值不为偶数则+1
获取目标点的scrollTop值，如果不为偶数，则+1
49.事件监听，删除事件监听
document.body.addEventListener('touchmove',_this.returnMr,false);//事件监听
document.body.removeEventListener('touchmove',this.returnMr,false); //删除事件监听
50.var relf = /[^\?]+/g;
ll.match(relf)
["agdsagdasg", "dasgadsgagda"]
其实用split更简单
window.location.href.split("?")[0]
var x = "www.zhidao.baidu.com" //问题，把所有的点换成 / 反斜杠
x.split(".").reverse().join("/")
51.if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ //测试当前是哪个手机系统，可根据业务需要选择
window.location.href="http://weixin.psmchina.cn";;}else if(/iPad/i.test(navigator.userAgent)){ // ipad window.location.href="http://www.qq.com/pad/";;}var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值
jQuery中获得选中select值
第一种方式
$('#testSelect option:selected').text();//选中的文本
$('#testSelect option:selected') .val();//选中的值
$("#testSelect ").get(0).selectedIndex;//索引
54.
<script language="javascript">
//防止页面后退
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
history.pushState(null, null, document.URL);
});
</script>
55.
<textarea id="a123" class='addrress' style="width:300px; height:20px; font-size: 14px; line-height:20px;" maxlength="64"></textarea>
var autoTextarea = function (elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function (type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function (name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};
return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));
elem.style.resize = 'none';
var change = function () {
var scrollTop, height,
padding = 0,
style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
};
addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
};
var text = document.getElementById("a123");
autoTextarea(text);// 调用
