用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>