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" />

如果我添加＆＃34; align：right＆＃34;解析失败了。我也尝试过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;   
}

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

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

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

UPDATE：

我做了一些进一步的调查，我得出的结论是，为什么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通过双向文本支持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;
}

什么是用于指定文本对齐的数据-dojo-props =对吗？

2 个答案:

UPDATE：