HTML 属性:dirname

Baseline 2023

Newly available

Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

dirname 属性可用于 <textarea> 元素和几种 <input> 类型,并描述表单提交期间元素文本内容的方向性。浏览器使用此属性的值来确定用户输入的文本是从左到右还是从右到左。使用时,元素的文本方向性值与 dirname 属性值一起包含在表单提交数据中作为字段名称。

¥The dirname attribute can be used on the <textarea> element and several <input> types and describes the directionality of the element's text content during form submission. The browser uses this attribute's value to determine whether text the user has entered is left-to-right or right-to-left oriented. When used, the element's text directionality value is included in form submission data along with the dirname attribute's value as the name of the field.

使用说明

¥Usage notes

dirname 属性可用于任何 <textarea> 元素,或任何具有 hiddentextsearchtelurlemailpasswordsubmitresetbutton 类型的 <input> 元素。

¥The dirname attribute can be used on any <textarea> element, or any <input> element with hidden, text, search, tel, url, email, password, submit, reset or button type.

提交数据的格式为 {dirname_value}={direction},其中 {dirname_value}dirname 属性的值,{direction} 是文本的方向性。例如,如果用户在具有 name="comment"dirname="comment-direction" 属性的元素中输入 "你好",则 GET 请求的 URL 编码表单提交数据将为 comment=Hello&comment-direction=ltr。方向性是以下之一:

¥The format of the submitted data is {dirname_value}={direction} where {dirname_value} is the value of the dirname attribute and {direction} is the directionality of the text. For example, if the user enters "Hello" in an element with the attributes name="comment" and dirname="comment-direction", the URL-encoded form submission data for GET requests will be comment=Hello&comment-direction=ltr. The directionality is one of the following:

rtl

用户输入的文本是从右到左的书写方向。

ltr

用户输入的文本是从左到右的书写方向。

如果未指定文本方向性,则用户代理将使用包含表单的父元素的方向性,如果未指定,则使用用户代理的默认方向性。

¥If no text directionality is specified, the user agent will use the directionality of the parent element containing the form, and if that is not specified, the default directionality of the user agent.

示例

¥Examples

文本区域元素方向性

¥Textarea element directionality

在此示例中,textarea 元素上的 dir="auto" 属性允许根据用户输入的文本自动确定文本方向性:

¥In this example, the dir="auto" attribute on the textarea element allows the text directionality to be determined automatically based on the text entered by the user:

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 编码的提交正文如下所示:

¥When the user submits the form, the user agent includes two fields, one called comment with the value "سيب", and one called comment-direction with the value "rtl". The URL-encoded submission body looks like this:

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

输入元素方向性

¥Input element directionality

在此示例中,输入元素上的 dir="auto" 属性允许根据用户输入的文本自动确定文本方向性:

¥In this example, the dir="auto" attribute on the input element allows the text directionality to be determined automatically based on the text entered by the user:

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,值为 "你好",另一个名为 comment-direction,值为 "ltr":

¥When the user submits the form, the user agent includes two fields, one called comment-input with the value "Hello", and one called comment-direction with the value "ltr":

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

继承方向性

¥Inheriting directionality

以下 <input><textarea> 元素没有 dir 属性,因此它们继承其父元素(即 rtl)的显式方向性:

¥The following <input> and <textarea> elements do not have a dir attribute, so they inherit the explicit directionality of their parent element, which is 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 编码的提交正文如下所示:

¥The URL-encoded submission body looks like this:

url
https://www.example.com/submit?user=LTR+Username&user-direction=rtl&comment=LTR+Comment&comment-direction=rtl

规范

Specification
HTML Standard
# attr-fe-dirname

¥Specifications

浏览器兼容性

¥Browser compatibility

html.elements.textarea.dirname

BCD tables only load in the browser

html.elements.input.dirname

BCD tables only load in the browser

也可以看看