我在我的應用程序中使用了輸入框的佔位符,對於不支持佔位符的瀏覽器使用jQuery解決方法。但是,在大多數瀏覽器中,即使輸入爲空時,佔位符也會消失。一種解決方法是在輸入字段上使用透明bg,並將輸入字段後面的文本放在輸入字段後面,並在輸入內容後將bg更改爲不透明。問題是我的應用程序現在有超過3000個輸入字段。這是可能通過運行時通過jquery插件做到這一點?或者我願意提供更好的建議。請幫忙。HTML永久佔位解決方法
0
A
回答
0
這是我寫的和正在使用:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
body{
background-color:#DDD;
}
span.placeholder
{
background-color:#FFF;
color:#777;
border-radius: 4px 4px 4px 4px;
margin: 5px 0;
padding: 9px 0 8px 13px;
width: 297px;
}
input
{
border: 1px solid #707A68;
border-radius: 4px 4px 4px 4px;
margin: 5px 0;
padding: 10px;
width: 310px;
background:transparent;
}
</style>
<body>
<div>
<input type="text" placeholder="hello" name="hh"/>
</div>
</body>
<script>
$('input').each(function(){
var txt = $(this).attr('placeholder');
var name = $(this).attr('name');
var node = $("<span class='placeholder'>"+txt+"</span>").appendTo($(this).parent());
$(this).before(node);
node.css('position','absolute');
node.css('z-index','-1');
node.css('display','block');
$(this).attr('placeholder','');
});
$('input').bind('keyup',function(){
if($(this).val()=="")
$(this).css('background','transparent');
else
$(this).css('background','#FFF');
});
</script>
1
你在同一頁面上有3000個輸入字段嗎?在這種情況下,您需要以某種方式重新設計您的應用程序。
如果您在多個頁面上有不同的輸入,並希望插件能夠在需要時自動產生佔位符,那麼可以使用一些很好的插件。以下是polyfills的綜合列表 - 只需查找「Web Forms:input placeholder」標題即可。 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
其中大多數不需要針對每個實例專門調用,因此您應該避免修改3000行代碼。 :)
0
我會使用值attr而不是邏輯將如下所示。
var input = document.createElement('input');
if(! ('placeholder' in input))
{
$("input[placeholder]").focus(/* clear value if it is equals placeholder */);
$("input[placeholder]").blur(/* assign placeholder if it is "" */);
$("input[placeholder]").each(/* assign placeholder if value equals "" */)
}
您還可以更改焦點和模糊輸入的樣式(或類),以便它看起來更像佔位符。
相關問題
- 1. 永久佔位符?
- 2. 從SourceSafe永久移除解決方案?
- 3. Jquery可以永久排序佔位符
- 4. Spring佔位符未解決
- 5. 佔位性質不解決
- 6. 永久替換html
- 7. 面向數據分析的Facebook令牌永久解決方案?
- 8. 缺少基礎SDK - 永久解決方案?
- 9. Windows安裝程序的永久解決方案錯誤1500
- 10. JTextField永久位置/位置?
- 11. 如何添加永久佔位內輸入申請
- 12. jquery永久性更改html
- 13. 圖像的永久位置?
- 14. 化妝方法參數永久休眠
- 15. jQuery方法不是永久的?
- 16. 如何永久解決MySQL錯誤2002(HY000)
- 17. 如何解決在android webview中「301移動永久」?
- 18. Android HTML佔位符
- 19. 構建項目時出錯 - 無法解析方法佔位符()
- 20. 無法在Picasso中解析方法佔位符?
- 21. 權限是否永久存儲在地理位置HTML 5中?
- 22. HTML報告解決方案
- 23. Javascript - 在自動完成結果上添加一個永久佔位符
- 24. 爲什麼我的程序永遠達不到解決方法?
- 25. Mongoose - 查詢exec()永遠不會在模型方法中解決
- 26. JMenuItem.getRootPane()解決方法?
- 27. openssl_cipher_iv_length解決方法
- 28. ExpressionChangedAfterItHasBeenCheckedError解決方法
- 29. DeadlineExceededError解決方法
- 30. 解決方法goto
不是在同一個頁面!這是一個非常大的應用程序 – SNAG 2012-07-24 07:56:18
你的意思是給一個鏈接? – SNAG 2012-07-24 09:21:46
呃 - 對不起。編輯我的答案。 – 2012-07-24 15:05:47