原生js实现回车键按下时触发事件

通过下面的JS代码可以监测用户按下回车(Enter)按钮,可根据需要执行相应代码;

  $(document).on('keypress', function(e) {
    if (e.which == 13) {
      alert('You pressed enter!');
    }
  }

上面代码使用e.which可改为e.keyCode,但e.keyCode 在部分浏览器上不兼容,所以建议使用e.which以保证代码100%安全执行;

Continue reading “原生js实现回车键按下时触发事件”

通过CSS改变文本框placeholder占位符默认颜色

HTML代码:

<input placeholder="welcome dustit.me!">

CSS样式:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

将样式添加到你的代码刷新页面看看是不是文本框默认文本内容已经变了。

html5 localstorage能存多少数据

根据 WHATWG 规范描述如下:

A mostly arbitrary limit of five megabytes per origin is recommended. Implementation feedback is welcome and will be used to update this suggestion in the future.

规范建议的本地数据存储不超过5M,同时大多数浏览器默认的localstorage存储大小也是5M限制。

localstorage大小限制可以通过以下面的代码进行测试: Continue reading “html5 localstorage能存多少数据”

2017年:最佳20款迷你CSS框架

无处不在的极简主义。 如果你也喜欢极简风格,那么下面的这些CSS框架,可以帮助你节省大量时间,避免从头开始重建基本的网站。

Spectre

轻量级和响应式和现代CSS框架,用于更快和可扩展的开发。 它为排版和元素,基于Flexbox的响应布局系统,CSS组件和实用程序提供基本样式,具有最佳编码风格和一致的设计语言。

Spectre Continue reading “2017年:最佳20款迷你CSS框架”