给非input、textarea元素添加placeholder

在iPhone浏览器的网页中，input或者textarea设置了readonly，但是点击的时候还是会聚焦，底部会出现软键盘。为了解决这个问题我们可以给input或者textarea绑定聚焦事件，聚焦的时候失去焦点：

$('input[readonly],textarea[readonly]').on('focus', function() {
    $(this).trigger('blur');
});

虽然这个方法解决了聚焦的问题，但是还不够完美。在有些情况下底部的软件盘会一闪而过，给人的体验不是非常好。
为了解决聚焦的问题，如果给input或者textarea设置disabled属性，然后用touch事件去模拟点击事件，虽然解决了软件盘一闪而过的问题，但是处理起来麻烦多了。
思前想后，想到了一种用非input元素模拟placeholder这种方式来实现。html如下

<span class="value" placeholder="选择所属公司"></span>

css如下：

.value:empty:before{
    content:attr(placeholder);
    color: #757575;
}

使用 :empty 选择器我们可以判断元素里面是否有元素（包括文字）；然后使用伪元素的 content 获取 span 元素上 placeholder 值，这样就模拟出来 placeholder 属性，有文字的时候该样式不起作用，正好与表单元素的placeholder功能一致，完美回避了input和textarea所带来聚焦的问题。