[前端冷知识集锦]
2015-01-21 本文已影响1078人
小寐一刻
-
浏览器地址栏运行JavaScript代码
javascript:alert('hello from address bar :)');
-
浏览器地址栏运行HTML代码
data:text/html,<h1>Hello, world!</h1>
-
把浏览器当编辑器
data:text/html, <html contenteditable>
-
利用script标签保存任意信息
<script type="text" id="template">
<h1>This won't display</h1>
</script>
var text = document.getElementById('template').innerHTML
-
实时编辑CSS
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body { color: blue }
</style>
</body>
</html>
-
创建长宽比固定的元素
<div style="width: 100%; position: relative; padding-bottom: 20%;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;background-color:yellow;">
this content will have a constant aspect ratio that varies based on the width.
</div>
</div>
-
生成随机字符串
function generateRandomAlphaNum(len) {
var rdmString = "";
for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
-
禁止 favicon.ico 请求(>=ie8)
<link rel="icon" href="data:;base64,=">
或者详细一点
<link rel="icon" href="data:image/ico;base64,aWNv">
-
禁止表单被自动填充
$('input[type="password"]').attr('type', 'text').addClass('password-fix');setTimeout(function(){ $('input.password-fix').attr('type', 'password').removeClass('password--fix');}, 500);
-
一行代码检测 IE 浏览器以及 IE 版本
var isIE = document.documentMode || +(navigator.userAgent.match(/MSIE (\d+)/) && RegExp.$1)
-
去除 Chrome 下 autocomplete 输入框的黄色背景
比较靠谱的是采用内阴影强制覆盖背景：
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus { box-shadow:0 0 0 50px white inset; -webkit-text-fill-color: #333;}
color 的设置同样不能覆盖，但是可以用 -webkit-text-fill-color
设定文字填充颜色的方式解决，所以上面的两行代码都是必须的，只不过你可以根据自己的实际情况修改颜色值。还有需要注意的是，input框在3种状态下都必须设置该样式，即:hover
和 :focus
伪类的样式设置也是必须的。
最后，其实还有更简单的办法，如果你不需要autocomplete功能，那么关掉就不会有这个烦恼了。
<form autocomplete="off">
