表单中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标准是需要给设定了字体大小的元素加高度的吧…

通过CSS3制作页面折角箭头的方法总结

最近在做wap方面工作,对html5和css3的相关知识又学习了些许,近期对于这种箭头” > “的CSS3制作方法进行了简单的总结,如果以后有想到其他更好的,也会不间断更新.闲话少说,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 arrow test demo by whidy</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style type="text/css">
body {font-family:"Microsoft YaHei";}
h3 {line-height:2;border-bottom:1px dashed #aaa;}
.updated-time {font-size:14px;color:#999;}
i {font-style:normal;}
div {position:relative;}
div p {padding-top:50px;}
.arrow-1::after {-webkit-transform:rotate(45deg);border-color:#666;border-width:1px 1px 0 0;height:8px;left:0px;top:0px;width:8px;border-image:none;border-style:solid;content:" ";position:absolute;}
.arrow-2 {display:inline-block;position:relative;vertical-align:top;}
.arrow-2::before,.arrow-2::after {content:"";font-size:0;width:0;height:0;line-height:0;overflow:hidden;display:inline-block;position:absolute;top:0;border:0 dashed transparent;border-left-style:solid;border-width:7px;}
.arrow-2::before {border-left-color:#666;left:0;}
.arrow-2::after {border-left-color:#fff;left:-2px;}
.arrow-3 {-webkit-transform:rotate(45deg);width:12px;height:12px;-webkit-box-shadow:2px -2px 0px -1px #000;background-color:#fff;display:block;}
.arrow-4 {font-family:-webkit-pictograph;transform:scale(1,2);display:block;}
.arrow-5 {-webkit-transform:rotate(-90deg) scale(1,0.5);font-family:cursive;font-size:24px;display:inline-block;}
</style>
</head>
<body>
<h3>这是一个通过CSS3各种方式来测试箭头的DEMO</h3>
<div>
    <i class="arrow-1"></i>
    <p>通过写上边框和右边框形成的角度进行旋转,代码简单</p>
</div>

<div>
    <i class="arrow-2"></i>
    <p>通过两个三角形叠加形成一个箭头,代码较多,需考虑背景色</p>
</div>

<div>
    <i class="arrow-3"></i>
    <p>通过旋转一个白色正方形,并给他阴影产生的效果(似乎android 2.x不支持模糊距离为0的情况.所以虽然效果也不错,不过依情况适用)</p>
</div>

<div>
    <i class="arrow-4"> > </i>
    <p>通过字体设置为<em>-webkit-pictograph</em>并进行缩放产生的效果,兼容性较差</p>
</div>

<div>
    <i class="arrow-5">V</i>
    <p><del>这个实际上也是通过字体(cursive)控制,字母V通过旋转和变形,我觉得可能不好用,适合卡通版箭头吧...</del>(有的移动端没这个字体或浏览器支持不好,PC端兼容性较差 2014年10月22日)</p>
</div>

<p class="notes">参考网站:<strong>http://www.w3cplus.com/content/css3-transform</strong></p>
<p class="updated-time">更新日期:2014年10月31日</p>
</body>
</html>

上面也对各种制作方法进行了简单说明,大家也可以打开查看DEMO页面

CSS的通配符*内不能用display属性?

本来是想简单的reset一下,并且做测试,希望所有元素都为块级元素,于是给*加了个display:block属性值结果发现居然就无法正常解析style了…想去搜一下是怎么回事呢,却找不到,本想多测试几个属性,试试这个通配符是否还有其他属性无法使用,结果也没试出来,就此抛下疑问?难道不能这样写

<!DOCTYPE html>
<html>
<head>
<title>css * cannot use display property</title>
</head>
<style type="text/css">
* {display: block;border: 1px solid #f00;padding: 10px;margin-bottom: 10px;}
body {background-color: #fc0;}
</style>
<body>
<p>body with background color but styles come out too! we dont want this happen!</p>
<span>you can also try it yourself :)</span>
<img src="#" width="300" height="300" />
<a href="#">all blocks now?!</a>
</body>
</html>

而,假设这样的话,不同浏览器效果更是离谱,这里以IE6,7,8,CHROME,IE11为例.测试结果如图:

通配符有了display属性的结果
通配符有了display属性的结果

暂不提这个IE6连HTML节点也算进去了(注意滚动条边框),就说这个不同浏览器的效果,也值得研究下了.

IE6和IE7在同级相邻元素间边距问题

IE6和IE7一向令网页制作者头痛,虽然有些经验丰富的前端开发人员能快速解决大部分问题,但是有时候,仍然会遇到一些令人疑惑的问题.我在做一个简单效果时,发现有时候及时清浮并不是一件好事,通过触发hasLayout反而出了问题.接下来详细说说这个IE6和IE7的问题.

两个同级的相邻的元素A和B(均为块级元素),当A内部有元素浮动,并且拥有外边距时,B则会贴紧A的最后一个元素,假设B没有清除浮动,则会与A的最后一个元素的左右边距保持边距距离,例如图一:

B没有清浮的情况下,左右边距正常
B没有清浮的情况下,左右边距正常

继续阅读“IE6和IE7在同级相邻元素间边距问题”

子级元素如何覆盖父级元素之边框颜色的遮盖应用

由于昨天重装系统,很多程序还未正确配置好,这篇暂且长话短说,直接上代码.
关于这个需求在网站制作上还是经常遇到的(例如白色边框覆盖其他边框的障眼法),做到全兼容似乎只有这个方法最好,特分享出来.这里坚决不用z-index,更加不用绝对定位!查看DEMO

<!DOCTYPE html>
<html>
<head>
<title>childBox and parentBox overlay relationship</title>
<style type="text/css">
* {margin:0;padding:0;line-height:1.5;font-family:"Microsoft YaHei";}
body {background-color:#eee;}
.container {width:1000px;margin:30px auto;}
.parentBox {width:300px;height:300px;margin:0 auto; border:50px solid #ccc;*overflow:hidden;}
.childBox {width:200px;padding:10px;margin:0 auto;height:250px;border:40px solid #aaa;margin-top:20px;position:relative;}
h3 {font-size:18px;}
p {font-size:14px;margin:10px 0;}
.author {text-align:right;}
</style>
</head>
<body>
 <div class="container">
 <div class="parentBox">
 <div class="childBox">
 <h3>childBox and parentBox</h3>
 <p>The childBox overlay the parentBox, otherwise, it must be compatible widt all IEs</p>
 <p class="author">whidy</p>
 </div>
 </div>
 </div>
</body>
</html>

明天重新整理一下,发一点相关页面应用到这个的地方.

一个小小的双引号引发的思考-XP内IE下的字体(下)

在原版的XP系统下IE 6,IE7,对于自体支持似乎不是特别的好.上次提到过中文字体似乎对于中文标点都不能正常显示出来.更不要提英文字符对汉字的支持了.
正是这个原因上期的背景图解决IE6,7字符替换问题费了很大的功夫.
这次我简要总结一下我所发现的XP下IE6和IE7下字体的一些问题.

其实我之前做网站从未遇到这样的问题,可能是很久以前微软雅黑并未普及吧.就目前来看,网上关于字体的资料太少,国外有却跟汉字毫无关系.我也下了一个可能并不准确的结论:

继续阅读“一个小小的双引号引发的思考-XP内IE下的字体(下)”