1. 如何在显示蒙版时禁止触屏滚动
function preventScroll(e){ e.preventDefault(); }
$('body').on('touchmove', preventScroll);
$('body').off('touchmove', preventScroll);
2. 计算 hash
String.prototype.hashCode = function() {
var hash = 0, i, chr, len;
if (this.length == 0) return hash;
for (i = 0, len = this.length; i < len; i++) {
chr = this.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash |= 0; // Convert to 32bit integer
}
return hash;
};
3. 获取远程图像的 base_64 字符串(序列化图像)
但是这样做的话绝大部分情况下会有权限问题(跨站了)
function imgstr(url) {
var img = new Image();
img.src = url;
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
return canvas.toDataURL('image/png');
};
4. 去除点击时出现的蓝色背景:
.selector {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
5. 可编辑 div (类似 textarea 的效果)
http://stackoverflow.com/questions/20726174/placeholder-for-contenteditable-div
关键在于这样用的时候内部的 Html 是可解析的,例如表情
<div class="test" placeholder="Type something..." contenteditable="true"></div>
6.可以通过下面这个来模拟 placeholder 的效果:
.test[placeholder]:empty:before {
content: attr(placeholder);
color: #555;
}
7. 对 contenteditable 属性的标签 change 事件处理
$('body').on('focus', '[contenteditable]', function() {
var $this = $(this);
$this.data('before', $this.html());
return $this;
}).on('blur keyup paste input', '[contenteditable]', function() {
var $this = $(this);
if ($this.data('before') !== $this.html()) {
$this.data('before', $this.html());
$this.trigger('change');
}
return $this;
});
8. javascript utf8 字符串字节长
function byteCount(s) {
return encodeURI(s).split(/%..|./).length - 1;
}
9. 解码 html encode
html_decode = function(encoded_text) {
return $("<div/>").html(encoded_text).text()
};
html_encode = function(encoded_text) {
return $("<div/>").text(encoded_text).html()
};
10. 选择一个 input 的范围(涂黑),仅限于 input 和 textarea
http://stackoverflow.com/q/499126/2544762
$.fn.selectRange = function(start, end) {
if(!end) end = start;
return this.each(function() {
if (this.setSelectionRange) {
this.focus();
this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
11. 涂黑整个元素的内容(任意元素):
http://stackoverflow.com/q/985272/2544762
function SelectText(element) {
var doc = document
, text = element
, range, selection
;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
12. 客户端使用 $_GET
// 解析 querystring 参数,放在 $.request.get 里面
(function() {
var url = location.search; // 获取url中"?"符后的字串
var objGet = {};
if (url.indexOf("?") != -1) {
var str = url.substr(1);
var segment = str.split("&");
for(var i = 0; i < segment.length; i ++) {
objGet[segment[i].split("=")[0]] = decodeURI(segment[i].split("=")[1]);
}
}
$.request = { get: objGet };
})();
【转载请附】愿以此功德,回向 >>
原文链接:http://www.huangwenchao.com.cn/2014/07/frontend-note.html【移动前端布局经验笔记】