Javascript的onkeydown函數運行後顯示消失

第一次在網站上，無論如何，我的問題是，當我使用onkeydown，然後使用GetChar檢查是否按下回車鍵，當運行時，只有函數的結果在屏幕上顯示大約一秒鐘，然後消失，如果用戶使用onclick（單擊輸入按鈕），則不會發生此問題。如何在使用onkeydown時將操作結果保留在屏幕上。該網站是sqrtcalc.comze.com如果你要明白我的意思Javascript的onkeydown函數運行後顯示消失

sqrtcalc

<!DOCTYPE html> 

<html> 
<head>

<title>Square Root Calculator</title> 

    <script language="javascript"> 
     function operAtion (form){ 
      var x = form.inputbox.value; 
       if (isNaN(x)){ 
        //document.write("lawl"); 
        var y = "Enter a number"; 
        document.getElementById("failsafe").innerHTML = y; 
        document.getElementById("demo").innerHTML = ""; 
       } else if (x < 0){ 
        var y = "Number must be positive"; 
        document.getElementById("failsafe").innerHTML = y; 
        document.getElementById("demo").innerHTML = ""; 
       } else if (x == ""){ 
        var y = "uhm, you didnt enter anything"; 
        document.getElementById("failsafe").innerHTML = y; 
        document.getElementById("demo").innerHTML = ""; 
       } else { 
        var y = Math.pow(x, 1/2) 
        document.getElementById("demo").innerHTML = "The square root of " + x + " is " + y; 
        document.getElementById("failsafe").innerHTML = ""; 
       } 
     } 
     function GetChar (event,form){ 
      var keyCode = event.keyCode; 
       if (keyCode == 13){ 
       operAtion(form); 
       } 
     } 
    </script> 

<p></p> 
</head> 
<body> 

<form name="myform" action="" method="get" style = "font-size:50px"><strong>Square Root Calculator</strong></br> 
    </br> 
<input type="text" name="inputbox" value = "" onkeydown = "GetChar(event,this.form);"> </br> 
    </br> 
<input id="button" type="button" name="button" value="  Enter  " onclick="operAtion(this.form)" > 
</form> 

<h1 id = "failsafe"></h1> 
</br> 
</br> 
</br> 
<h1 id = "demo"></h1> 
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> 
<img border="0" src="http://counter.rapidcounter.com/counter/1353157574/a"; ALIGN="middle" HSPACE="4" VSPACE="2" style = "padding-left:1400px;"> 

</body> 
</html>

來源

2012-11-18 timeshift117

你可以提供一個[SSCCE（http://sscce.org/）？「儘量減少帶寬爲你的例子，不要讓觀衆」 –

你點擊表單中的按鈕，這意味着你實際上提交表單。你需要禁用表單提交，所以你不做一個完整的服務器往返。 –

'

'這是瘋了，我不相信它甚至有效。改爲使用'
'，不要將它們用於任意間距！使用CSS邊距或其他東西。 – Brad

添加以下代碼：

 window.onload = function(){ 
      document.getElementById("myform").onsubmit = function(){ 
       return false; 
      } 
     }

並添加id屬性id="myform"到<form>標記。

來源

2012-11-18 06:44:10 hebikuzure

感謝球員現在的工作:) – timeshift117

我重構你的代碼一點點：

我刪除了你的內聯函數（內聯JS不正是最好的實踐）
我添加了一個ID給您的形式，因此它可以被引用
我加return false;保持形式從提交
的onsubmit同時處理點擊進入

的Javascript

document.getElementById('myform').onsubmit = function() { 
    var x = this.inputbox.value; 

    if (isNaN(x)) { 
     //document.write("lawl"); 
     var y = "Enter a number"; 
     document.getElementById("failsafe").innerHTML = y; 
     document.getElementById("demo").innerHTML = ""; 
    } else if (x < 0) { 
     var y = "Number must be positive"; 
     document.getElementById("failsafe").innerHTML = y; 
     document.getElementById("demo").innerHTML = ""; 
    } else if (x == "") { 
     var y = "uhm, you didnt enter anything"; 
     document.getElementById("failsafe").innerHTML = y; 
     document.getElementById("demo").innerHTML = ""; 
    } else { 
     var y = Math.pow(x, 1/2) 
     document.getElementById("demo").innerHTML = "The square root of " + x + " is " + y; 
     document.getElementById("failsafe").innerHTML = ""; 
    } 

    return false; 
}

HTML

<form name="myform" action="" method="get" style="font-size:50px" id="myform"><strong>Square Root Calculator</strong><br> 
    <br> 
<input type="text" name="inputbox"> <br> 
    <br> 
<input id="button" type="submit" name="button" value="  Enter  "> 
</form> 

<h1 id="failsafe"></h1> 

<h1 id="demo"></h1>

Working demo

來源

2012-11-18 07:12:12 EasyCo

謝謝我感謝幫助 – timeshift117

@ timeshift117這是Stackoverflow的標準做法，如果它解決了您的問題，接受一個答案。看來我和hebikuzure的答案都適合你。所以隨時可以接受一個......哦，最多的票是免費的，並表示讚賞。 – EasyCo

Javascript的onkeydown函數運行後顯示消失

回答

相關問題