? ? ? ? 寫這篇文章是因?yàn)槲矣辛诉@樣的需求希太，我的需求就是UI設(shè)計(jì)的效果圖是input框里面placeholder的文字顏色不一樣斑举，大家都知道翎蹈，你可以更改placeholder文字的顏色與大小和輸入的內(nèi)容不一樣，但是不能保證placeholder里面有不同樣式的文字。我只能通過jq來寫蘸鲸。
? ? ? ?他的原理就是將代替placeholder的文字定位到input框里面，然后采用的是keyup事件窿锉，就是當(dāng)鍵盤抬起的時候酌摇，如果input里面的value值為空，那么定位的這段文字處于顯示狀態(tài)嗡载，如果不為空窑多，則為隱藏。
$("#use_name").keyup(function(){
if(this.value !== ""){
$(".pos").css("display","none")
}else{
$(".pos").css("display","block")
}
})
? ? ? ? 只是使用了keyup事件洼滚，沒有用獲取或者失去焦點(diǎn)事件埂息，因?yàn)橄喈?dāng)于不能即時獲取input框里面的value值。
? ? ? ?下面說一下痛點(diǎn)： ?
? ? ? ?那就是你定位上去的文字是在input之上的遥巴，這樣就只能選擇文字千康，而不能在input里面輸入。有人的解決方案就是設(shè)置不同的層挪哄，z-index不一樣吧秕，但是如果有其他層在的時候，比如輪播圖迹炼，那就不好玩了砸彬。
? ? ? ? 解決方案：
? ? ? ? 當(dāng)點(diǎn)擊定位文字的時候，讓input框獲取焦點(diǎn)斯入，這就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;">
用戶名/手機(jī)號/
</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>
