javascript 像退格键一样的子串

Question

嗨，在下面的代码中，我有一个 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>

没有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);
   }
}

输入（最多 4 个字母）工作正常，但我不知道如何使退格键我尝试了一点，但它不起作用。

有人能帮忙吗？

谢谢！

Answer 1

您几乎已经做到了，但是 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.

Answer 2

问题是您正在尝试获取 <div id="pin"> 的值。 div 没有任何价值。交换以下行：

pin.innerHTML = pin.value.substr(0, count);

有了这个：

pin.innerHTML = pin.innerHTML.substr(0, count);

另外，有些事情你应该清理一下。例如，仅使用有效的 html 标签。 <text> 和 <zeichen> 不是。

Answer 3

你需要像那样改变你的js函数

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.innerHTML.substring(0, pin.innerHTML.length - 1);
  }
}

javascript 像退格键一样的子串

javascript substring like backspace

html

javascript

substring

backspace