有幾個 HTML 屬性用途相當特別, 特別記下以茲備忘:


1. title:

title 屬性可以附加在任何的 tag 上, 它的功用是產生類似 Tooltip Text 的提示效果: 當滑鼠停留在某個元素上面時, 就會出現提示文字. 例如:

<p title='簡介'>落落長的文章本文, 落落長的文章本文, 落落長的文章本文...</p>

效果長這個樣子:

HTML title attribute

註: 如果希望 '提示文字' 中有斷行 (多行提示),

  • 直接把 title='...' 加在 HTML tag 中時: 把 LF 字元換成 &#10; (把 CR 字元換成 &#13;).
  • 使用 javascript 來附加 title 屬性時: 無需轉換, 就用原本的 '\n' 或 '\r\n' 就可以了.

2. placeholder:

這個屬性是 HTML5 才有的定義, 功用是作為輸入欄的預設值. 一般會和 javascript 一起配合運作. 例如:

輸入字串:<input id='ph_test' type='text' placeholder='my default value' />
...
<script type='text/javascript'>
...
// 取得輸入物件參考
var obj = document.getElementById('ph_test');
// 取得輸入值或者預設值
var val = obj.value || obj.placeholder;
...
</script>
...

注意事項:

  • 因為預設值是使用者 沒有輸入 時用的, 所以原本的輸入值 (value) 要是空字串才會看得出效果
  • 需要取得該欄位的值時, 需要判斷 value 是空字串時, 使用 placeholder 替代. 一個比較簡短的寫法是像第8行那樣: 把 value (寫在前面) 去和 placeholder 作 Logical OR 運算 (||)

效果長這個樣子:

HTML placeholder

arrow
arrow

    MagicJackTing 發表在 痞客邦 留言(0) 人氣()