如何更改输入框的值以便在HTML5网页中显示

how to change the value of input box just for display in html 5 web page

本文关键字：HTML5 网页 显示 输入 何更改      更新时间：2023-09-26

我有一个文本字段，我在其中输入我想要的数据，如果用户输入1000，它会在文本字段中显示1000，但同样的值1000也会在计算中进一步使用，所以如何解决这个问题，如果用户输入1000，它只显示1000，如果我们在计算中使用，那么同样的var会显示1000用于计算。

  <HTML>
  <body>
  <input type="text" id="test" value="" />
  </body>
   <script>

     var c=document.getElementById(test);
   </script>
  </html>

因此，如果c用户输入1000，那么它应该为dispally 1而dispally 1000，如果用户在脚本中使用

     var test=c

则测试应显示1000

document.getElementById返回null或对唯一元素的引用，在本例中为input元素。输入元素具有属性value，该属性包含它们的当前值(作为字符串(。

所以你可以使用

var test = parseInt(c.value, 10);

以获取当前值。这意味着，如果不使用任何预定义的值，则test将为NaN。

但是，这将只评估一次。为了更改值，您需要添加一个事件侦听器，它处理对输入的更改：

// or c.onkeyup
c.onchange = function(e){
    /* ... */
}

泽塔离开的继续形式：

var testValue = parseInt(c.value);

现在，让我们根据您的需要组合显示器：1000

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);

现在，您将显示保存在textFinalDisplay中作为字符串，实际值保存在c.value 中作为整数

<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);

在jsfiddle 上

您可以从变量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>

这适用于Firefox(Linux(上的整数。您可以使用函数"intNumValue(("访问"非commaed"值：

<!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>
相关文章：