因為要修改默認placeholder的樣式比較困難，用js模擬placeholder的效果
<!DOCTYPE HTML><html lang="zh-CN"><head> <meta charset="utf-8"> <title>模擬placeholder</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/CSS/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> *{margin: 0;padding: 0} div#main{ width:300px; text-align: center; } .red{ color:red; } </style></head><body> <input type="text" class="form-control red" value="請輸入電話"> <script> $(function(){ $('input').focus(function(){ if($(this).val()=='請輸入電話'){ $(this).toggleClass('red'); $(this).val(''); } }); $('input').blur(function(){ if($(this).val().trim()==''){ $(this).toggleClass('red'); $(this).val('請輸入電話'); } }); }); </script></body></html>
新聞熱點
疑難解答
