用JQ编写代替input框里面的placeholder效果
写这篇文章是因为我有了这样的需求，我的需求就是UI设计的效果图是input框里面placeholder的文字颜色不一样，大家都知道，你可以更改placeholder文字的颜色与大小和输入的内容不一样，但是不能保证placeholder里面有不同样式的文字。我只能通过jq来写。
他的原理就是将代替placeholder的文字定位到input框里面，然后采用的是keyup事件，就是当键盘抬起的时候，如果input里面的value值为空，那么定位的这段文字处于显示状态，如果不为空，则为隐藏。
$("#use_name").keyup(function(){
if(this.value !== ""){
$(".pos").css("display","none")
}else{
$(".pos").css("display","block")
}
})
只是使用了keyup事件，没有用获取或者失去焦点事件，因为相当于不能即时获取input框里面的value值。
下面说一下痛点：
那就是你定位上去的文字是在input之上的，这样就只能选择文字，而不能在input里面输入。有人的解决方案就是设置不同的层，z-index不一样，但是如果有其他层在的时候，比如轮播图，那就不好玩了。
解决方案：
当点击定位文字的时候，让input框获取焦点，这就ok。
$(".pos").click(function(){
$("#use_name").focus()
})
整理代码如下：
<style> ==>css
.div_ipt {
position: relative;
}
#use_name {
height: 30px;
line-height: 30px;
font-size: 18px;
width: 250px;
}
.pos {
position: absolute;
left: 0;
top: 0;
height: 30px;
line-height: 30px;
vertical-align: middle;
margin: 0;
}
</style>
<div class="div_ipt"> ==>html
<input type="text" id="use_name" />
<p class="pos">
<span style="color: #6f6f70;font-size: 16px;">
用户名/手机号/
</span>
</p>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script> ==>js
<script>
$("#use_name").keyup(function() {
if(this.value !== "") {
$(".pos").css("display", "none")
} else {
$(".pos").css("display", "block")
}
})
$(".pos").click(function() {
$("#use_name").focus()
})
</script>
