我需要在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" />
答案 0 :(得分:2)
嗯,这种情况正在发生,因为在dojo NumberTextBox 的模式中具有“%”的特定含义。
要了解更多详情,请click here...
然而,我试图找出具有此功能的确切原因,并且我注意到实际文本框包含隐藏格式的 100 ,并且dojo在此基础上添加了一个容器,其中包含的格式化值10000%强>
下面的图片将更好地解释
因此,如果我们需要在文本框中添加“%”,我们需要找到其他解决方法。
希望这会对你有所帮助:)。
答案 1 :(得分:1)
实现此行为有两种方法:
在文本框中添加%符号,使其看起来像这样
中试试https://jsfiddle.net/vikash2402/2w3wx5rm/4/
正如我们看到numberTextBox的名称成为显示容器的id所以基于id我们可以更新值。
中试试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" />