2012年8月20日 星期一

input欄位預設文字+點按後預設字(value值)消失

今天有個朋友問我這個問題,結果我還真的忘記這個功能怎麼做....。
所要的需求就是網頁上有個input欄位,類似那種搜尋框吧
然後希望點按到搜尋框時,預設的文字可以消失。

使用jQuery的方法:

優: 適用於不支援html5的瀏覽器(IE8以上).
缺: 必須先匯入jquery.
     在IE必須先允許執行ActiveX控制項.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜尋框預設文字+點按後預設字消失</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script> <!--匯入jquery是必要項目-->
  <style>
  #target {color: #666;}
  button{background: #555;coloR: #fff;}
  </style>
  <script type="text/javascript">
    $(function(){
      $('#target').click(function() {
          //$(this).val("");  
          $('input[name="target"]').val("");
      });
    });
  </script>
</head>
<body>
<form>
  <input id="target" name="target" type="text" value="type something" />&nbsp;<button>search!</button>
</form>
</body>
</html>

使用HTML5方式 :

優: 不需額外匯入jquery.
缺: 只能在可以使用HTML5的瀏覽器.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜尋框預設文字+點按後預設字消失</title>
  <style>
  #target {color: #666;}
  button{background: #555;coloR: #fff;}
  </style>
</head>
<body>
<form>
  <input id="target" name="target" type="text" placeholder="type something" />&nbsp;<button>search!</button>
</form>
</body>
</html>

2 則留言:

  1. 相信此時妳已知jquery也可用http://fuelyourcoding.com/scripts/infield/ 外掛來做到

    回覆刪除

若你看的文章,時間太久遠的問題就別問了,因為我應該也忘了... XD

Vue multiselect set autofocus and tinymce set autofocus

要在畫面一進來 focus multiselect 的方式: 參考: https://jsfiddle.net/shentao/mnphdt2g/ 主要就是在 multiselect 的 tag 加上 ref (例如: my_multiselect), 另外在 mounted...