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

Question

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

目前我正在使用 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

嗯，这是因为在 dojo NumberTextBox.[= 的模式中具有 "%" 的特定含义14=]

想了解更多详情请click here...

但是我试图弄清楚拥有这个的确切原因，我注意到实际的文本框包含隐藏格式的 100 并且 dojo 正在在此之上添加一个具有格式化值的容器其中包含 10000%.

Below Image will explain this better

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

希望这对您有所帮助:)

Answer 2

有两种方法可以实现此行为：

第一种方法

在文本框中添加 % 符号，使其看起来像这样

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

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

NumberTextBox issue when using constraints.pattern: "#%"

dojo

dijit.form

第一种方法

第二种方法