的JavaScript字符串像退格

HI代碼樓下，我有一個HTML設置有密碼輸入表單按鈕：的JavaScript字符串像退格

<!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個字母）打字工作正常，但我不知道如何讓我試着一點點退格，但它不是工作。

任何人都可以幫忙嗎？

謝謝！

來源

2016-08-01 Kamil

你已經差不多了，但使用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。

來源

2016-08-01 14:15:03 Archer

如果'你的js函數只pin'長2個字符，但您仍想使用退格？編輯：這就是我所說的，這裏是你的讚揚！ –

謝謝@JeffNoel。小學生打字錯誤：p – Archer

問題是您試圖獲得<div id="pin">的值。 A div沒有價值。交換以下行：

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

有了這一個：

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

另外，有一些事情你應該清理。例如，只能使用有效的html標籤。 <text>和<zeichen>沒有。

來源

2016-08-01 14:15:46

你需要改變這樣的

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

來源

2016-08-01 14:37:15

非常感謝您，那正是我一直在尋找的！ – Kamil

的JavaScript字符串像退格

回答

相關問題