表单中readonly的input等标签,禁止光标进入(focus)的几种方式

在做移动端页面,表单内的部分元素如果设置了readonly=”readonly”,CHROME模拟移动端是看不出问题的。而手机上虽然表单元素不能编辑内容,但是会出现闪动的光标以及页面底部有一条系统自带的控制bar。这样的体验很差,于是我总结了几个方案。

在做移动端页面,需要在订单页面中显示表单数据,由于UI统一,所以就依旧采用form的结构来写结构,只读数据的标签自然要加readonly=”readonly”,以为这样就行了,CHROME模拟移动端是看不出问题的。手机上一看,虽然表单元素不能编辑内容,但是会出现闪动的光标以及页面底部有一条系统自带的控制bar。

表单readonly元素依然有光标
表单readonly元素依然有光标,底部还有BAR,感觉不好

这种情况对我来说并不好。于是网上找了一些解决方案,现在总结一下:

方案一(JS):

<input type="text" value="test" onfocus="this.blur()" readonly="readonly">

这个很好理解就是进入的时候自动跳出。但是缺点是一方面js处理没有css好,二是如果需要在该元素上绑定其他事件,其他人开发不留意可能会造成事件覆盖。

方案二(CSS):

[readonly="readonly"] {
  user-select: none;
}

这是个新的实验性属性,具体说明及兼容性可参考user-select MDN
用起来感觉很好,但是同样有两个问题:一,非标准属性(请尽量不要在生产环境中使用它!);二,如果用户想要复制该表单内容就不行了,这个问题个人感觉很严重!

方案三(CSS):

[readonly="readonly"] {
  pointer-events: none;
}

这个是我感觉比较适合我的,因此最后我采纳了该方案,当然也是有弊端的,绑定在只读表单元素的所有事件将无法生效。除此之外都表现完美,就我目前需求来看,也不需要什么事件。因此采用了~

当然,如果你也遇到相似的问题,可以根据情况选择对应的方案,当然,如果你也有更好的方法也欢迎留言~

PostCSS学习指南(二)

关于我最近学习PostCSS的一些相关心得和总结,主要介绍项目中可能用到的一些插件比如autoprefixer,postcss-partial-import,postcss-advanced-variables,cssnano,postcss-px2rem,precss等等

(推荐访问github上面的Markdown排版的介绍PostCSS学习指南(二))

继上一次PostCSS学习指南(一)后,渐渐开始在项目中应用。

这次决定主要讲解一些个人认为非常有帮助的PostCSS插件。

本期主要介绍以下几个插件和几个坑

  1. autoprefixer
  2. postcss-partial-import
  3. postcss-advanced-variables
  4. cssnano
  5. postcss-px2rem
  6. precss
  7. postcss-nestingpostcss-nested
  8. 坑( ఠൠఠ )ノ

autoprefixer

这个就不用多说了,必装插件之一。方便的写规范的css,它会为你提供非常完整的hack兼容方案的。当然这里需要了解一下的是,它的大部分兼容数据来源Can I Use,另外一个稍微需要了解的插件配置参数就是browsers,比如这样写:

module.exports = {
  plugins: [
    require('autoprefixer')({ browsers: 'last 2 versions' })
  ]
}

关于这个参数的详细介绍可以看看Browserslist Queries,文中说了,强烈建议将查询写入package.json(后面会告诉你为何要写在这里),而非配置postcss.config.js中autoprefixer的browsers参数。所以此处建议写法如下: 继续阅读“PostCSS学习指南(二)”

PostCSS学习指南(一)

关于我最近学习PostCSS的一些相关心得和总结

(推荐访问github上面的Markdown排版的介绍PostCSS学习指南(一))

PostCSS介绍

PostCSS是一个利用JS插件来对CSS进行转换的工具,这些插件非常强大,强大到无所不能。其中,Autoprefixer就是众多PostCSS插件中最流行的一个。

截至目前(2017年7月)PostCSS已经有超过200个插件,你可以插件列表查找有没有你所需要的插件。如果你想自己写个插件,据说这是一个不错的主意,而且非常简单,你可以试着搞点事

看到这里,你可能没有发现它的强大之处,甚至我自己都没有被我翻译的这段官方文字所打动。~~因为没(wǒ)有(yě)对(bù)比(tài)就(huì)没(yòng)有(zhè)伤(wán)害(yì)。~~好了,是时候启动装逼模式了。

维基百科,阿里巴巴,谷歌,Wordpress,Twitter等网站均有使用,大佬们都在用你有什么理由不跟上步伐。

再来看看这张PostCSS下载数量的npm-stat统计表(数据证明一切):

PostCSS下载数量

学习PostCSS之前需要了解一些事情:

  1. PostCSS插件的处理方式类似那些CSS预处理器,而非预处理器和后处理器(PostCSS is Not a *Pre-*processor and Not a *Post-*processor either
  2. PostCSS is Not “Future Syntax”(不是新式语法?不知道怎么翻译)
  3. PostCSS本身并非整理或优化CSS的工具
  4. PostCSS可以完成很多意想不到的事情,例如用postcss-rtl恶搞一下:yum:

那么它还有一些特性,例如创建了一个插件功能极强的生态系统,具有模块化需要什么用什么(precss就是一个集成了类似SASS的包),相比其他的CSS预处理器它的优势主要体现在以下几个方面:

  1. 拥有极高的处理性能(3倍以上的处理速度
  2. 你既可以写正常的CSS,也可以结合LESS或者SASS一起编写
  3. 对Source Map支持更好
  4. 他的插件真的太多太强大太便利了

其他对比SASS和LESS的区别在于他们内置了大量的方法,而也许你只需要用到几个变量而已,大材小用。而PostCSS则可制定个人需求的一套解决方案(仅安装需要的插件)。这也就是他高性能的主要原因。几乎SASS和LESS有的功能全都有!

总之好处太多了。这里就不一一列举了。迫不及待的你已经等不及安装使用了吧。

继续阅读“PostCSS学习指南(一)”

安装node-sass的时候报错 Cannot download “https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-48_binding.node”:

搭建项目环境需要安装node-sass,经常会出现错误,提示https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-48_binding.node无法下载,原因就是国外的东西很慢,解决办法也很简单…

最近重装了系统在配置项目环境时需要用到node-sass,经常出现安装失败的情况.

以前也是又是装python又是配环境,也不知道到底是怎么瞎折腾出来的的.好不容易弄好了就没管了.

这次搞虚拟机测试了一下,有个很好的解决方案.是在github上node-sass的issues看到的,屡试不爽,当然如果你也是我这种情况可以试试.我想大部分情况都能解决吧.

先看看我的出错信息

安装node-sass错误信息
安装node-sass错误信息

如果你也是这样的不妨将提示中的这个https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-48_binding.node下载下来,存放在C:\Users\Whidy(你的用户)\AppData\Roaming\npm-cache\node-sass\4.5.3目录内,再尝试重新执行npm install node-sass我想应该就可以成功了吧.

当然版本不同的话会略有差异.请自行对应替换,如果你发现还是下载的很慢,我这里分享一下我上传到百度云的这个4.5.3版本的win32-x64-48_binding.node,然后拷贝到刚才说的目录就好了.

参考: Install node-sass 4.5.0 failed on window 7, “Binary has a problem: Error: %1 is not a valid Win32 application.”.

node搭建服务器局域网内其他设备无法访问的问题

最近公司网络调整,本来记得之前手机访问电脑的服务器好端端的,突然就不好使了…

找了公司网络维护来看看,一时也没看出来.不过测了一下其他人的电脑搭建的服务器是可以访问的.于是推测是本机问题…可是一直没有对本机的网络有修改调整,怎么就突然不行了.只好自己动手查问题.

初步推测防火墙设置.简单暴力的办法关闭防火墙.果然通了…但是个人不喜欢关防火墙,感觉不安全了哈哈哈,其实是觉得小题大做,应该从根本解决问题.

回忆之前本地maven服务器,wamp搭建的服务器都好好的.大概是幻觉,也就是node搭建的服务器我或许没测过.好吧废话少说.不能访问的地址是192.168.1.107:9000,我就查一下什么程序用9000窗口,如下:

占用9000端口的是node.exe
占用9000端口的是node.exe

防火墙状态写了不允许,我猜大概就是这里了.

回到防火墙设置,在允许的应用中,我发现,专用网络的勾没有勾上(如下图),估计问题就在这里,于是勾上,确认后,BINGO…

防火墙node设置规则
防火墙node设置规则

拿出手机刷新一下,好了~

问题就解决了,问题其实解决起来很简单,不过对于网络这块不是很懂的,也遇到类似问题的可以通过类似的办法处理试试.

(话说出现这样的问题会不会是因为我第一次使用node启动服务器时候,弹出来的防火墙提示我误点了不允许导致的- -)

Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings Sync)

最近基本上习惯了用VSCODE进行开发了.最主要的感觉就是查找JS里面函数定义和引用很方便.还有可能是装逼心理… :roll:

一开始不知道怎么备份VSCODE的配置,傻乎乎的把要用的插件抄下来,还有用户settings拷贝出来.每次换了电脑或者重装系统什么的都要重新备份.虽然来回调整的概率很低,但是突然哪天需要同步设置什么的就很麻烦了~至少我是在初期经常鼓捣这个编辑器,而且办公在家和公司是不同的设备~所以觉得还是很有必要的~

于是我今天要说的就是这个插件Settings Sync

官方都是英文的,不过还算简单,我把步骤简化一下.

1.安装插件并重启VSCODE就不用说了

安装Settings Sync
安装VSCODE Settings Sync后重新加载

2.重启后按快捷键 alt+shift+u (这里假设你第一次用)

它会弹出一个窗口对应的是github上面的创建个人gist的页面,如果未登录请先登录github.

github创建gist来存储设置
github创建gist来存储设置

保存后会生成一个key

请牢记token id,后面将会用到
请牢记token id,后面将会用到

3.切回到vscode,他会有个输入区,就是存放刚才生成的key

输入刚才生成的key
输入刚才生成的key

然后理论上他就开始对你本机的配置进行一个扫描上传了.至此上传工作完成.

接下来我们到另一台电脑上了下载配置.同样的先安装Settings Sync插件,并重新加载.

然后按快捷键alt+shift+d,就应该会弹出一个输入框,请在这里输入之前保存下来的key(GIST ID),回车后将会自动下载之前上传的配置.

那么下载完成后,你这台电脑修改了相关配置再次上传就好了.是不是感觉方便多了~

其他的说明,如果在输入gist id写错了,读取不到的情况下,大概需要重置设置,按F1,输入sync,这里有重置选项.试试看~

重置sync的gist配置信息等
重置sync的gist配置信息等

还有些其他的功能例如自动上传下载等等,不是很常用,大家可以自行看看官方文档,基本的使用方法就是这样了,我写的如果有问题或者哪里不明白的可以留言- -.

下面是官方说明

http://shanalikhan.github.io/2015/12/15/Visual-Studio-Code-Sync-Settings.html

插件地址

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

使用webpack dev server通过本地IP启动服务器后invalid host header的错误解决办法

最近在研究webpack,本来前阵子webpack dev server还配置的挺正常的…今天突然重新搭环境的时候跑不起来了…不知道是不是版本原因导致的,反正现象是

webpackDevServer服务器启动正常,进行localhost:9000访问正常,但是用本地的ip例如我IP是192.168.1.100,于是在浏览器中访问192.168.1.100:9000则出现了invalid host header.

那么解决这个问题也是差了不少资料.如果你存在此问题可以尝试一下方法:

首先说明环境 webpack 2.6.1 + webpackDevServer 2.5.0

我本来的webpack.config.js文件内的webpackDevServer配置如下

devServer: {
    contentBase: __dirname,
    compress: true,
    port: 9000,
    inline: true,
    host: '0.0.0.0'
}

有人说要加一个

disableHostCheck: true

不过不知道这里是没有效果的

又查到说加了一个public参数,试了下就好了.所以就分享下.完整的效果是

devServer: {
    contentBase: __dirname,
    compress: true,
    port: 9000,
    inline: true,
    host: '0.0.0.0',
    disableHostCheck: true,
    public: '192.168.1.107'
}

PS:后来发现用disableHostCheck: true其实也行了,大概是缓存原因没有及时看到效果,不论怎么样…出现这种问题的朋友都可以试试咯~

参考

–host 0.0.0.0 Not working
I am getting an “Invalid Host header” message, when running my React app in a Webpack dev server on Cloud9.io
webpack-dev-server2.4.3版本的官方说明
webpack-dev-server disableHostCheck导致 invalid host header

Windows 10 64bit 下nodejs报错”MSBUILD : error MSB4132:…”解决

在win10 64位系统下,关于nodejs下通过npm install环境部署项目时出现报错’MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 “4.0”。’的解决办法

最近用自己笔记本办公配置windows 10下的开发环境(当然不排除WIN7下也有可能存在此问题),其中在进行一个项目的NPM INSTALL的时候一直出错…错误如下

关于NPM INSTALL相关错误信息
关于NPM INSTALL相关错误信息

找了很多解决办法…都无效.十分沮丧…前几天在win7 64bit下也是折腾了好几天.依赖关系实在是复杂- –

我先来说说这个问题怎么处理吧.经过大量查找研究得出的结论…用了一行这个命令:

npm config set msvs_version 2012 --global

参考资料:

MSBUILD : error MSB4132: The tools version “2.0” is unrecognized. Available tools versions are “4.0”.(用户shawmanz32na的回答,也包含其他可能存在的问题的解决集合链接)

Cannot install node modules that require compilation on Windows 7 x64/VS2012

当然也有人说修改注册表的方法,虽然我也用了不过没什么效果.我现在想还原注册表都不行了- -没备份.这里如果大家在试了以上方法仍然无效的情况下可以试试修改注册表的这块的版本号,但是个人不建议,或者提前做好注册表备份.这里不详细说明注册表方法,给个链接大家参考MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 “4.0”。

当然可能还存在其他的问题比如缺少VC++ 20XX运行库什么的

可以试试这个软件下载站的工具常用运行库合集(VB+VC运行库)

jQuery Trickshots来自Tutorialzine的一本关于100个高级jQuery技术书籍分享

最近看到一篇写的不错的文章,来自jQuery中的100个技巧.首先感谢作者辛苦翻译.

不过我也想找原文…于是也是辛苦了很久才找到了这篇伟大的文章出处,更难能可贵的是该站竟然有多个版本的电子书,开放免费.当然是需要注册的,我注册了一个,下载了与大家分享.

这个压缩包包含了全部html,js实例源码,还有多个版本的电子版(pdf,mobi,epub),满足了用电脑,手机或者kindle的用户简直太棒了!!!迫不及待放出分享连接了.以下是分享地址

百度网盘: 英文原版下载页面(以及鸟语版,不懂鸟语的不要下)

如果不能下载了请与发邮件

最后再次感谢伟大的

作者:Tutorialzine

来源:http://tutorialzine.com/books/jquery-trickshots/

介绍:

In this book, you will find 100 advanced jQuery techniques that we have developed over the years as JavaScript programmers and authors for Tutorialzine, presented as easy to understand tips.

关于sublime text 3(3103)版本Ctrl+Alt+P无法正常使用解决办法

关于sublime text 3(3103)版本Ctrl+Alt+P无法正常使用,自定义快捷键的设置command实际上就是prompt_select_workspace,解决了此问题

过完年回来上班的第一天,打开sublime text 3,提示有更新(Sublime Text 3 Build 3103),没有多想就点下载更新了…更新完后,发现问题严重了,一方面是之前朋友买的key失效了,看到非注册的几个单词在窗口顶部就不自在了.当然这个不是本文重点,至于怎么解决这个问题,我相信不会难倒机智的大家.

而另一方面是很多之前的设置也没了.比如自定义快捷键.我有安装SideBarEnhancements这个插件,设置的F12快速预览也没了,只好找回旧版存档重新设置,其实这个问题也不大.
最糟糕的是,之前习惯用的快速切换项目的Ctrl+Alt+P不能用了,这个是旧版默认设置好的.然后到处找快捷键怎么设置的,我很傻,其实后来发现这个问题很好解决.我却绕了个大弯.

首先,百度肯定是搜不到的.然后去用谷歌找.谷歌是万能的,找到如下内容:

{ "keys": ["ctrl+alt+p"], "command": "prompt_select_workspace" }

这下添加到自定义keymap,问题解决.参考:Quick Switch Project shortcut doesn’t work anymore(当然,他好像说3098版本就去掉了,我并未注意到可能我一直在使用更旧的版本.而changelog里面似乎也没看到3098)

当然这里还要提一点的是,如果一切设置好了发现还是不能用,那多半是快捷键冲突所致,比如输入法的全局快捷键等等,这里推荐一个虽然有点老,但是还不错的工具Windows Hotkey Explorer,大家自行安装后,可以查看系统全局被占用的快捷键,然后对应的关闭调整一下就好了.

windowsHotkeyExplorer软件界面
windowsHotkeyExplorer软件界面

总结下来我的自定义快捷键是这样的.

[
    { "keys": ["f12"],
        "command": "side_bar_open_in_browser" ,
        "args":{"paths":[], "type":"testing", "browser":""}
    },
    { "keys": ["alt+f12"],
        "command": "side_bar_open_in_browser",
        "args":{"paths":[], "type":"production", "browser":""}
    },
    {
        "keys": ["ctrl+t"],
        "command": "side_bar_new_file2"
    },
    {
        "keys": ["ctrl+alt+p"],
        "command": "prompt_select_workspace"
    }
]

最后来说说为啥我笨死了.其实关于这个command,我找不到的话,我直接找旧版本的sublime text的default keymap查一下就好了嘛…笨笨笨………..还费了老大功夫.其他朋友有遇到类似问题也可举一反三,自行配置一个好用的sublime text咯~~~~

工具虽好,务必不要再WIN10下使用该软件,会发生十分可怕的事情!(2017年8月25日 更新)