[前端冷知识集锦]
浏览器地址栏运行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">
作者：七仔南
链接：https://www.jianshu.com/p/528fa1731160
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦