HTML 屬性:dirname
dirname 屬性可用於 <textarea> 元素和幾種 <input> 型別,並描述表單提交期間元素的文字內容的文字方向。瀏覽器使用此屬性的值來確定使用者輸入的文字是左到右還是右到左的。使用時,元素的文字方向值會與 dirname 屬性的值一起包含在表單提交資料中,作為欄位的名稱。
用法說明
dirname 屬性可用於任何 <textarea> 元素,或任何具有 hidden、text、search、tel、url、email、password、submit、reset 或 button 型別的 <input> 元素。
提交資料的格式為 {dirname_value}={direction},其中 {dirname_value} 是 dirname 屬性的值,{direction} 是文字的方向。例如,如果使用者在具有 name="comment" 和 dirname="comment-direction" 屬性的元素中輸入“Hello”,則 GET 請求的 URL 編碼表單提交資料將是 comment=Hello&comment-direction=ltr。方向是以下之一:
如果未指定文字方向,則使用者代理將使用包含表單的父元素的文字方向,如果未指定父元素的文字方向,則使用使用者代理的預設文字方向。
示例
Textarea 元素方向
在此示例中,textarea 元素上的 dir="auto" 屬性允許根據使用者輸入的文字自動確定文字方向。
<form method="get" action="https://www.example.com/submit">
<textarea name="comment" dir="auto" dirname="comment-direction">سيب</textarea>
<button type="submit">Send my greetings</button>
</form>
當用戶提交表單時,使用者代理會包含兩個欄位,一個名為 comment,值為“سيب”,另一個名為 comment-direction,值為“rtl”。URL 編碼的提交體如下所示:
https://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl
Input 元素方向
在此示例中,input 元素上的 dir="auto" 屬性允許根據使用者輸入的文字自動確定文字方向。
<form method="get" action="https://www.example.com/submit">
<input
type="text"
name="comment-input"
dir="auto"
dirname="comment-direction"
value="Hello" />
<button type="submit">Send my greetings</button>
</form>
當用戶提交表單時,使用者代理會包含兩個欄位,一個名為 comment-input,值為“Hello”,另一個名為 comment-direction,值為“ltr”。
https://www.example.com/submit?comment-input=Hello&comment-direction=ltr
繼承方向
以下 <input> 和 <textarea> 元素沒有 dir 屬性,因此它們繼承了父元素的顯式方向,即 rtl。
<div dir="rtl">
<form method="get" action="https://www.example.com/submit">
<input
type="text"
name="user"
dirname="user-direction"
value="LTR Username" />
<textarea name="comment" dirname="comment-direction">LTR Comment</textarea>
<button type="submit">Post Comment</button>
</form>
</div>
URL 編碼的提交體如下所示:
https://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl
規範
| 規範 |
|---|
| HTML # attr-fe-dirname |
瀏覽器相容性
html.elements.textarea.dirname
載入中…
html.elements.input.dirname
載入中…