需求：input标签,不允许用户手动输入编辑,默认会有提示词提示用户点选，点击后可执行js修改该标签值

html标签：<input type="text" placeholder="提示文字" disabled="disabled" />
css: 
::-webkit-input-placeholder{color: #f00;}
::-moz-input-placeholder{color: #f00;}
:-ms-input-placeholder{color: #f00;} /* ms只能识别单个冒号*/
::placeholder{color: #f00;}
input:disabled{color: #080;background: none;}

(注意：placeholder属性必须分行写才能生效！)
会发现该input标签iphone下显示不一样，这是User Agent 默认样式的问题。

iPhone input disabled 的默认样式:

input:disabled{ opacity: 0.4}

但是即便是重设为 opacity : 1 也无效。因为还有一条隐藏的样式 -webkit-text-fill-color ，于是有效的样式为 ：

input:disabled{  
    opacity: 1;
    -webkit-text-fill-color: #080;
}

但设了-webkit-text-fill-color之后，前面设置的::placeholder提示文字颜色又失效了，即使添加input:disabled::placeholder{color: #f00;}也不生效，解决方法是：

input:disabled::placeholder{color: #f00;-webkit-text-fill-color:#f00;}

即input:disabled::placeholder 也加入-webkit-text-fill-color声明

完整html & css 代码：

<style>
	*{margin:0;padding:0;}
	body{font:12px "Microsoft YaHei"}
	ul,li{list-style:none;}
	
	body{padding: 50px;}
	input{height: 28px;line-height: 28px;color: #080;border: 1px solid #bbb;outline: none;-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0)}


	::-webkit-input-placeholder{color: #f00;}
	::-moz-input-placeholder{color: #f00;}
	:-ms-input-placeholder{color: #f00;}
	::placeholder{color: #f00;}
	input:disabled{color: #080;background: none;opacity: 1;
	filter: alpha(opacity=100);-webkit-text-fill-color:#080;}
	input:disabled::-webkit-input-placeholder{color: #f00;-webkit-text-fill-color:#f00;}
	input:disabled::-moz-input-placeholder{color: #f00;-webkit-text-fill-color:#f00;}
	input:disabled:-ms-input-placeholder{color: #f00;-webkit-text-fill-color:#f00;}
	input:disabled::placeholder{color: #f00;-webkit-text-fill-color:#f00;}
</style>
<div>
	正常input:<input type="text" placeholder="提示文字" />
</div>
<br />
<br />
<div>
	disalbed:<input type="text" placeholder="提示文字" disabled="disabled" />
</div>
<br />
<br />
<div>
	readonly:<input type="text" placeholder="提示文字" readonly="readonly"/>
</div>

看html代码，我们可以看到input下有用一div标签包裹，这个标签是用的，因为我们还没有实现“点击input后可执行js修改该标签值”

一个事实是：加入了disabled="disabled"属性声明的input标签不能响应js 点击事件，但该input标签的值还是可以修改的，变通的方法是用一标签包住该input标签，将点击修改修改该标签值的事件加在该父元素上就可以了。

可拷下面的代码来验证：

<script>
	var div=document.querySelectorAll("div");
	for(var i=0;i<div.length;i++){
		div[i].onclick=function(){
			this.querySelector("input").value="123456";
		}
	}
</script>

至此，上述需求已能完美实现，只是实现过程中会有些坑要一步步填，过程会比较曲折。

其实，为实现上面需求，我们可以不使用disabled="disabled"，细心的童鞋可能会发现我们上面的代码中用到 readonly="readonly" 做演示，没错，我们又下面一行代码来写：

<input type="text" placeholder="提示文字" readonly="readonly"/>

发现只需要用到简单的样式：

::-webkit-input-placeholder{color: #f00;}
::-moz-input-placeholder{color: #f00;}
:-ms-input-placeholder{color: #f00;}
::placeholder{color: #f00;}

然后点击事件也可直接加在input标签上即可。另外iphone下，带readonly属性声明的input标签，点击后会获得输入焦点，解决方法：

<script>
	var inp=document.querySelectorAll("input");
	for(var i=0;i<inp.length;i++){
		inp[i].onfocus=function(){
			this.blur();
		}
	}
</script>

获得焦点时，直接强制让其失去焦点，很猥琐，但方法有效。