用于指定文本对齐方式的 data-dojo-props 是什么？

Question

我一直在尝试 dijit 文本框的文档，但似乎没有关于如何进行 text-align: right css 样式设置的适当文档。

<input type="text" name="firstname" value="testing testing"
    data-dojo-type="dijit/form/TextBox"
    data-dojo-props="trim:true, propercase:true" id="firstname" />

如果我添加 "align: right" 解析失败。我也通过 CSS 尝试过，但文本对齐似乎没有反映出来。

<input type="text" name="firstname" value="testing testing"
    data-dojo-type="dijit/form/TextBox"
    data-dojo-props="trim:true, propercase:true, align: right" id="firstname" />

我也尝试过通过 css 样式对齐文本，但解析效果不佳。

<input type="text" name="firstname" value="testing testing"
    data-dojo-type="dijit/form/TextBox"
    data-dojo-props="style: { width: '150px'; text-align: right}" id="firstname" />

Answer 1

我不知道是否可以使用 data-dojo-props 属性设置文本对齐方式。但是，您可以使用 CSS 选择器解决您的问题：

HTML:

<input type="text" name="firstname" value="testing testing"
    data-dojo-type="dijit/form/TextBox"
    data-dojo-props="trim:true, propercase:true, align: right" id="firstname" />

CSS（例子）：

input[name="firstname"] {
 text-align: right;   
}

或

#firstname {
 text-align: right;   
}

另一种优雅的方法是创建一个属性选择器来查询 data-dojo-props 属性的 align: right 值。使用此选择器，您可以一次访问所有输入项。

input[data-dojo-props*="align: right"] {
 text-align: right;   
}

在这里您可以找到一个 jsfiddle 示例。

更新：

我做了一些进一步的调查，得出的结论是 dojo 解析失败的原因是语法问题。

以下代码段没有解析错误：

<input type="text" name="firstname" value="testing testing"
    data-dojo-type="dijit/form/TextBox"
    data-dojo-props="trim:true, propercase:true, style:'text-align: right'" id="firstname" />

但结果不如预期：

    <div class="dijit dijitReset dijitInline dijitLeft dijitTextBox"
 id="widget_firstname" role="presentation" widgetid="firstname" style="text-
align: right;"><div class="dijitReset dijitInputField dijitInputContainer">
<input class="dijitReset dijitInputInner" data-dojo-attach-
point="textbox,focusNode" autocomplete="off" name="firstname" type="text" 
tabindex="0" id="firstname" value="Testing Testing"></div></div>

因为样式将应用于包装器 div。

我认为处理您的要求的最佳方法是仅使用 CSS 样式而不使用 data-dojo-props 属性。

Answer 2

Dojo 通过 bi-directional 文本支持 https://dojotoolkit.org/reference-guide/1.10/quickstart/internationalization/bi-directional-text.html

原生支持右对齐文本输入

这是为了通过在元素上设置 dir 标签来反转部分或整个页面（包括输入）的文本方向：

<body dir="rtl">
    <!-- Widgets Here -->
</body>

但是，这可能不是您想要的。试试这个 CSS:

.dijitInputContainer .dijitInputInner {
    text-align: right;
}

用于指定文本对齐方式的 data-dojo-props 是什么？

What is the data-dojo-props used to specify text alignment = right?

dojo

dijit.form

更新：