HTML 屬性:dirname

dirname 屬性可用於 <textarea> 元素和幾個 <input> 型別,並在表單提交期間描述元素文字內容的方向性。瀏覽器使用此屬性的值來確定使用者輸入的文字是左對齊還是右對齊。使用時,元素的文字方向值將與 dirname 屬性的值一起作為欄位名稱包含在表單提交資料中。

使用說明

dirname 屬性可用於任何 <textarea> 元素,或任何 <input> 元素,其 hiddentextsearchtelurlemailpasswordsubmitresetbutton 型別。

提交資料的格式為 {dirname_value}={direction},其中 {dirname_value}dirname 屬性的值,{direction} 是文字的方向性。例如,如果使用者在具有 name="comment"dirname="comment-direction" 屬性的元素中輸入“Hello”,則 GET 請求的 URL 編碼表單提交資料將為 comment=Hello&comment-direction=ltr。方向性是以下選項之一:

rtl

使用者輸入的文字為從右到左的書寫方向。

ltr

使用者輸入的文字為從左到右的書寫方向。

如果未指定文字方向性,則使用者代理將使用包含表單的父元素的方向性,如果未指定父元素的方向性,則使用使用者代理的預設方向性。

示例

Textarea 元素的方向性

在此示例中,textarea 元素上的 dir="auto" 屬性允許根據使用者輸入的文字自動確定文字方向性。

html
<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 編碼的提交主體如下所示:

url
https://www.example.com/submit?comment=%D8%B3%D9%8A%D8%A8&comment-direction=rtl

Input 元素的方向性

在此示例中,input 元素上的 dir="auto" 屬性允許根據使用者輸入的文字自動確定文字方向性。

html
<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”。

url
https://www.example.com/submit?comment-input=Hello&comment-direction=ltr

繼承方向性

以下 <input><textarea> 元素沒有 dir 屬性,因此它們繼承其父元素的顯式方向性,即 rtl

html
<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 編碼的提交主體如下所示:

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

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

html.elements.input.dirname

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱