表单中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学习指南(二)”

SublimeText3的css文件引用图片转base64快速方法

如果在SublimeText3的css文件引用图片里将图片快速转换为base64(Data URL)的方法,以及利用chrome开发者工具获取图片的Data Url的方法

在你做的css文件中,起初背景图都是直接引用目录的切好的图片.如下:

.icons {background-image:url(../images/icon.png);}

那么在做移动端页面的时候,有时我们需要将小图直接转换成base64格式,一般只能借助第三方工具.
这里其实用sublime text 3 的快捷键ctrl+’可以直接快速转换.
当然页面的图片建议是压缩(例如tinypng工具)后的,要不然转换出的字符将会很长.
如果能确定页面的图片都可以直接转换,你可以直接选择 url( 然后快捷键 alt+f3 ,接着按 ctrl+’ ,这样一来css的图片就全部转换好了.

另外还有一种通过chrome快速获取网页上图片的Data Url方法.如图

chrome_ImageToDataUrl
chrome_ImageToDataUrl

页面内某元素到文档顶部的距离计算

之前写了一篇元素到网页顶部距离计算方法,其实分明有更好的方法,例如这个方法就不需要写那么复杂的循环了,这里再次总结一下。

2015年1月7日

之前写了一篇元素到网页顶部距离计算方法,其实分明有更好的方法,例如这个方法就不需要写那么复杂的循环了,这里再次总结一下。

请看下面代码,或者查看在线demo调试,看起来兼容性都是OK的。大家可以自己试试。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>the distance to top</title>
    <style type="text/css">
    div {margin:10px 20px;padding:5px;border:3px solid #aaa;position:relative;}
    .para {background-color:#ccc;}
    </style>
</head>
<body>
<div class="outer">
    <div class="outerWrap">
        <div class="header"></div>
        <div class="content">
            <div class="content-inner">
                <p class="para" id="para">
                    Hello, whidy! 这是一个获取当前元素距离网页顶部高度的计算demo.
                </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
para = document.getElementById('para');
var y = para.offsetTop;
var y2 = para.getBoundingClientRect().top;
while (para = para.offsetParent) {
    var oStyle = para.currentStyle? para.currentStyle : window.getComputedStyle(para, null); //currentStyle兼容IE
    var borderTopWidth = parseInt(oStyle.getPropertyValue('border-top-width')); //border-top-width实际上用于被包父级层的边框值计算,因此本demo内header的边框值对此处不影响,取而代之的是直接计入content盒子距离outerWrap的高度
    if(borderTopWidth) { //如果有边框值则加上边框
        y += para.offsetTop + borderTopWidth;
    }
    console.log(y,'offsetTop');
    console.log(y2,'getBoundingClientRect');
}
</script>
</body>
</html>

参考资料: Element.getBoundingClientRect() – Web API 接口 | MDN

魅族手机MX2原生浏览器字体大小问题

今天要说的是我才发现的一个BUG.关于魅族手机MX2,MX3(其他机型未测试),固件版本均为3.7.3A稳定版原生浏览器,在测试页面的字体大小样式时无效,

都知道魅族的手机很坑了,我就不多说了.

今天要说的是我才发现的一个BUG.关于魅族手机MX2,MX3(其他机型未测试),固件版本均为3.7.3A稳定版原生浏览器,在测试页面的字体大小样式时无效,如果你的魅族手机有遇到类似问题,可以试试这个demo测试一下,顺便看下源码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meizu mx2 stock browser bug with font size style</title>
<style type="text/css">
* {margin:0;padding:0;}
body * {/*height:150px;*/display: block;}
</style>
</head>
<body>
    <h1 style="font-size:60px;">h1 tag with a font-size 60px style!</h1>
    <p style="font-size:60px;">p tag with a font-size 60px style!</p>
    <span style="font-size:60px;">span tag with a font-size 60px style!</span>
    <strong style="font-size:60px;">strong tag with a font-size 60px style!</strong>
    <a href="#" style="font-size:60px;">a tag with a font-size 60px style!</a>
</body>
</html>

从这个代码中可以看出,所有元素应该都是60px字体大小.

但是又可以发现a标签的字体大小是比以上字体大,实际上a才是60px大小,而其他元素的字体大小则是一个默认值.为什么会这样,请问魅族开发人员!

我发现了一个现象,上面把高度给注释去掉了,也就是”hack”后,则字体大小显示正常,均保持了60px,见demo2…这是什么原因.

鬼才知道!

因此我们一致认为魅族原生浏览器坑爹.我不记得web标准是需要给设定了字体大小的元素加高度的吧…