如何更改仅在html 5网页中显示的输入框的值
[英]how to change the value of input box just for display in html 5 web page
问题描述
I have a textfield in which i am entering data i want that if user enter 1000 then it show 1,000 in textfield but this same value 1000 is also used in calculations further so how to solve this if user enter 1000 then just for display it show 1,000 and if we use in calcualtion then same var shows 1000 for calculating. 
我有一个文本字段，我要在其中输入数据，我希望如果用户输入1000，那么它在文本字段中显示1,000，但是这个相同的值1000还会在计算中使用，因此，如果用户输入1000，然后仅显示它，该如何解决呢？显示1,000如果我们在计算中使用，则相同的变量将显示1000进行计算。
<HTML>
<body>
<input type="text" id="test" value="" />
</body>
<script>
var c=document.getElementById(test);
</script>
</html>
so if c user enter 1000 then it should dispaly 1,000 for dispaly one and if user uses in script 因此，如果c用户输入1000，则应该显示1,000，以显示一个，并且如果用户在脚本中使用
var test=c
then test should show 1000 然后测试应该显示1000
5 个解决方案
解决方案1
1 已采纳 2013-04-20 08:07:21
document.getElementById returns either null or a reference to the unique element, in this case a input element. document.getElementById返回null或对唯一元素的引用，在本例中为input元素。 Input elements have an attribute value which contains their current value (as a string). 输入元素的属性value包含其当前值（作为字符串）。
So you can use 所以你可以使用
var test = parseInt(c.value, 10);
to get the current value . 得到当前值 。 This means that if you didn't use any predefined value test will be NaN . 这意味着，如果您不使用任何预定义值，则test将为NaN 。
However, this will be evaluated only once. 但是，这只会被评估一次。 In order to change the value you'll need to add an event listener, which handles changes to the input: 为了更改该值，您需要添加一个事件侦听器，该事件侦听器处理输入的更改：
// or c.onkeyup
c.onchange = function(e){
/* ... */
}
解决方案2
1 2013-04-20 08:24:22
Continuing form where Zeta left: Zeta离开的连续形式：
var testValue = parseInt(c.value);
Now let's compose the display as you want it: 1,000 现在，让我们根据需要组成显示：1,000
var textDecimal = c.value.substr(c.value.length-3); // last 3 characters returned
var textInteger = c.value.substr(0,c.value.length-3); // characters you want to appear to the right of the coma
var textFinalDisplay = textInteger + ',' + textDecimal
alert(textFinalDisplay);
Now you have the display saved in textFinalDisplay as a string, and the actual value saved as an integer in c.value 现在，您已将显示内容保存为textFinalDisplay作为字符串，并将实际值保存为c.value中的整数
解决方案3
0 2013-04-20 08:31:40
<input type="text" id="test" value=""></input>
<button type="button" id="get">Get value</input>
var test = document.getElementById("test"),
button = document.getElementById("get");
function doCommas(evt) {
var n = evt.target.value.replace(/,/g, "");
d = n.indexOf('.'),
e = '',
r = /(\d+)(\d{3})/;
if (d !== -1) {
e = '.' + n.substring(d + 1, n.length);
n = n.substring(0, d);
}
while (r.test(n)) {
n = n.replace(r, '$1' + ',' + '$2');
}
evt.target.value = n + e;
}
function getValue() {
alert("value: " + test.value.replace(/,/g, ""));
}
test.addEventListener("keyup", doCommas, false);
button.addEventListener("click", getValue, false);
解决方案4
0 2013-04-20 08:34:47
you can get the actual value from variable x 您可以从变量x获取实际值
<html>
<head>
<script type="text/javascript">
function abc(){
var x = document.getElementById('txt').value;
var y = x/1000;
var z = y+","+ x.toString().substring(1);
document.getElementById('txt').value = z;
}
</script>
</head>
<body>
<input type="text" id="txt" value="" onchange = "abc()"/>
</body>
解决方案5
0 2013-04-20 09:36:00
This works with integer numbers on Firefox (Linux). 在Firefox（Linux）上可以使用整数。 You can access the "non-commaed"-value using the function "intNumValue()": 您可以使用函数“ intNumValue（）”访问“非逗号”值：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
String.prototype.displayIntNum = function()
{
var digits = String(Number(this.intNumValue())).split(""); // strip leading zeros
var displayNum = new Array();
for(var i=0; i<digits.length; i++) {
if(i && !(i%3)) {
displayNum.unshift(",");
}
displayNum.unshift(digits[digits.length-1-i]);
}
return displayNum.join("");
}
String.prototype.intNumValue = function() {
return this.replace(/,/g,"");
}
function inputChanged() {
var e = document.getElementById("numInp");
if(!e.value.intNumValue().replace(/[0-9]/g,"").length) {
e.value = e.value.displayIntNum();
}
return false;
}
function displayValue() {
alert(document.getElementById("numInp").value.intNumValue());
}
</script>
</head>
<body>
<button onclick="displayValue()">Display value</button>
<p>Input integer value:<input id="numInp" type="text" oninput="inputChanged()">
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.