使用NumberTextBox时constraints.pattern问题："#%“

Question

我需要在一个的值旁边显示一个百分比符号(仅附加%符号，不需要转换)。

目前我正在使用constraints: {pattern: "#%"}，我注意到dojo将两个零位数添加到值中，例如：

value 100 displayed as 10000% 

这在我的用例中并没有错，相反，我想将它显示为：

value 100 displayed as 100% 

下面是一个工作示例：

https://jsfiddle.net/2w3wx5rm/

我很确定我的用例是不典型的，但我想知道您是否知道解决这个问题的解决方案或解决方法。

require(["dijit/form/NumberTextBox", "dojo/domReady!"], function(NumberTextBox){
    new NumberTextBox({
          name: "programmatic",
          constraints: {pattern: "#%"},
          value: 100
    }, "programmatic").startup();
});

<label for="programmatic">Opacity:</label>
<input id="programmatic" type="text" />

Answer 1

实现这一行为有两种方法：

第一种方法

将%符号添加到文本框外，如下所示

​

​

在JSFiddle...中试试这个

https://jsfiddle.net/vikash2402/2w3wx5rm/4/

第二种方法

正如我们看到的那样，numberTextBox的名称成为显示容器的id，因此基于id，我们可以更新值。

在JSFiddle...中试试这个

https://jsfiddle.net/vikash2402/2w3wx5rm/6/

下面的代码片段将帮助您理解这一点：

​

require(["dijit/form/NumberTextBox", "dojo/on", "dojo/dom", 
"dojo/aspect", "dojo/domReady!"], function(NumberTextBox, on, dom, aspect){
    var numbertextBox = new NumberTextBox({
          name: "programmatic",
          constraints: {pattern: "#"},
          value: 100
    }, "programmatic");
    numbertextBox.startup();
    dom.byId(numbertextBox.name).value = numbertextBox.value + "%";
    on(numbertextBox, "blur", function(){
             dom.byId(numbertextBox.name).value = numbertextBox.value + "%";
        });
        on(numbertextBox, "focus", function(){         
             dom.byId(numbertextBox.name).value = parseInt(dom.byId(numbertextBox.name).value.replace('%',''));
        });
});

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>


<label for="programmatic">Opacity:</label>
<input id="programmatic" type="text" />

​

Answer 2

这是因为在dojo NumberTextBox.的模式中有"%"的特定含义。

​

​

想知道更多细节，请点击这里..。

但是，我试图找出发生这种情况的确切原因，并注意到实际的textbox包含隐藏格式的100，并且在此基础上再添加一个带有格式化值的容器，其中包含10000%。

下图将更好地解释这一点

​

​

因此，如果我们需要在文本框中添加"%"，我们需要找到其他解决办法。

希望这能帮到你:)