类似javascript子字符串的退格_Javascript_Html_Substring_Backspace

类似javascript子字符串的退格

javascript html

类似javascript子字符串的退格,javascript,html,substring,backspace,Javascript,Html,Substring,Backspace,您好，在下面的代码中，我有一个html设置，带有密码输入表单的按钮： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Log in form</title> <link href="style.css" rel="stylesheet"> <script src="ui.js">

您好，在下面的代码中，我有一个html设置，带有密码输入表单的按钮：

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="utf-8">
      <title>Log in form</title>
      <link href="style.css" rel="stylesheet">
      <script src="ui.js"></script>
   </head>
   <body>
      <div id="main">
         <div id="top_bar"><tx id="tx">Bildschirmsperre</tx></div>
         <div id="infotext">Wählen sie Ihre PIN aus</div><br />
         <div id="pin"></div><button id="btnback" onclick="changepin(10)">&larr;</button><br />

         <div id="tasten">
            <button class="button" onclick="changepin(1)">1</button>
            <button class="button" onclick="changepin(2)">2</button>
            <button class="button" onclick="changepin(3)">3</button><br />
            <button class="button" onclick="changepin(4)">4</button>
            <button class="button" onclick="changepin(5)">5</button>
            <button class="button" onclick="changepin(6)">6</button><br />
            <button class="button" onclick="changepin(7)">7</button>
            <button class="button" onclick="changepin(8)">8</button>
            <button class="button" onclick="changepin(9)">9</button><br />
            <button class="button" onclick="changepin(0)">0</button>
         </div>
         <div id="bottom_bar">   <text id="text_left">ABBRECHEN</text>  <zeichen id="zeichen">|</zeichen>   <text id="text_right">WEITER</text> </div>
      </div>
   </body>
</html>


登录表格
比尔德奇姆斯佩尔酒店
你在澳大利亚吗

&larr

1.
2.
3

4.
5.
6

7.
8.
9

0
ABBRECHEN | WEITER

没有css，所以现在看起来很糟糕，它包含德语单词，所以请忽略它们

到目前为止，我有以下javascript：

var count = 0;

function changepin(value) {
   var pin = document.getElementById("pin");
   if(value != 10 && count < 4){
      pin.innerHTML += value;
      count++;
   }else if(value == 10){
      count--;
      pin.innerHTML = pin.value.substr(0, count);
   }
}

var计数=0；
功能更改PIN（值）{
var pin=document.getElementById（“pin”）；
如果（值！=10&&count<4）{
pin.innerHTML+=值；
计数++；
}else if（值==10）{
计数--；
pin.innerHTML=pin.value.substr（0，计数）；
}
}

输入（最多4个字母）效果很好，但我不知道如何使退格我尝试了一点，但它不起作用

有人能帮忙吗

谢谢

您几乎已经拥有了它，但是

count

变量的使用是不必要的，而且可能会造成混淆。这就是你需要的，没有它

// only do this once - no need to find the element every time
var pin = document.getElementById("pin");

function changepin(value) {
    var currentPin = pin.innerText;

    // if user pressed the back button then remove the last character
    if (value == 10) {
        pin.innerText = currentPin.substr(0, currentPin.length - 1);
    }
    // else if the current pin is long enough then just exit without doing anything else
    else if (currentPin.length > 3) {
        return;
    }
    // else add the new character to the pin
    else {
        pin.innerText = currentPin + value;
    }
}

如您所见，我还将

innerHTML

更改为

innerText

。在这种情况下没有区别，但是总是引用正确的属性是一个好习惯，因此您希望设置文本，而不是HTML。

问题是您试图获取

的值。

div

没有值。交换以下行：

pin.innerHTML=pin.value.substr（0，计数）
关于这一点：
pin.innerHTML=pin.innerHTML.substr（0，计数）
还有，有些事情你应该清理一下。例如，仅使用有效的html标记
和
不是。
您需要像这样更改js函数
功能更改PIN（值）{
var pin=document.getElementById（“pin”）；
如果（值！=10&&count<4）{
pin.innerHTML+=值；
计数++；
}else if（值==10）{
计数--；
pin.innerHTML=pin.innerHTML.substring（0，pin.innerHTML.length-1）；
}
}
如果pin
只有2个字符长，而您仍然想使用退格，该怎么办？编辑：这就是我要说的，这是你的投票！非常感谢，那正是我想要的！