禁用按鈕，每當文本字段爲空動態

這裏是我的代碼：禁用按鈕，每當文本字段爲空動態

<input type="text" onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;"/> 
<input type="button" value="Click to begin!" id="start_button" disabled/>

這工作，但仍不能有效，因爲用戶可以刪除文本框中的文本，點擊按鈕同時他持有DELETE鍵。有沒有更高效的方式來實現這個使用JavaScript？

來源

2011-08-15 Eng.Fouad

單擊按鈕查看是否有任何文本時，添加一個檢查。如果沒有，則彈出警告框（或其他形式的反饋）來告訴用戶輸入數據，而不要執行按鈕功能。

例子：

<input id="myText" type="text" onkeyup="stoppedTyping()"> 
<input type="button" value="Click to begin!" id="start_button" onclick="verify()" disabled/> 

<script type="text/javascript"> 
    function stoppedTyping(){ 
     if(this.value.length > 0) { 
      document.getElementById('start_button').disabled = false; 
     } else { 
      document.getElementById('start_button').disabled = true; 
     } 
    } 
    function verify(){ 
     if myText is empty{ 
      alert "Put some text in there!" 
      return 
     } 
     else{ 
      do button functionality 
     } 
    } 
</script>

來源

2011-08-15 15:37:49 yoozer8

+1這也適用於用戶使用上下文菜單刪除文本框值。 – pimvdb

爲什麼downvote？ – yoozer8

你可以輪詢輸入的值。這會效率較低，反應較差但可能更可靠。

正如您所指出的那樣，當輸入值被清除時，keyup事件將不會被激發。如果他們用鼠標突出顯示文本，點擊右鍵並切換？

更改事件可能會有幫助，但它仍然不是那麼可靠。它只會引起模糊，並會錯過一些更改（如自動完成選擇）。

這裏的a jsFiddle演示了輪詢解決方案。

針對Eng.Fouad的評論，這裏是如何添加JS：

你可以把它放在一個腳本標記，像這樣：

<script type="text/javascript"> 
    //my code 
</script>

，將工作，但這將意味着您的用戶的瀏覽器不會緩存JavaScript，這意味着加載您的頁面需要更長的時間。將腳本與內容分開也更爲清晰。但是如果你想要一個快速簡單的選擇，這應該做的。把它放在你身體的底部，並把它包裝在一個DOM準備好的處理程序中（參見答案的底部）。

作爲一個更清潔的選項，你可以把它放在一個外部文件中，例如someScript.js，其內容將是你的JavaScript（沒有腳本標籤）。然後，您鏈接到該腳本從你的HTML文件：

<html> 
    <head></head> 
    <body> 
     <!-- contents of page --> 
     <script type="text/javascript" src="/path/to/someScript.js"></script> 
    </body> 
</html>

NB：你需要使你的腳本的Web訪問，以便瀏覽到http://www.your-site.com/path/to/someScript.js訪問腳本。

腳本標記位於主體的底部，以便頁面首先加載實際內容，然後加載腳本。這意味着您的內容可以更快地被用戶看到。

您應該對jsFiddle中的JavaScript進行最後一次修改。 jsFiddle具有運行「onDomReady」的代碼（請參閱小提琴的左上角）。從技術上講，如果你的腳本在你的內容之後，你不需要這樣做。它確保腳本在內容加載後運行，以便腳本嘗試在DOM中查找元素時，它們已被加載並找到。您應該將此腳本添加到腳本中（出於某種原因）您將腳本移動到內容之前。爲了包裝你的腳本在jQuery的一個DOM準備處理程序，做到這一點：

$(function(){ 
    //my code 
});

在這個例子中，代碼放在哪裏的//my code註釋將運行，只有當頁面已準備就緒。

來源

2011-08-15 15:56:06 Spycho

對不起，我還是初學者，但我應該在哪裏放javascript代碼？我試圖將它添加到腳本標記中，但它給了我錯誤 –

你應該把它放在一個JS文件中，並且將它包裝在一個文檔就緒處理程序中（這樣它就不會在頁面內容加載之前執行）。然後，在HTML文件中，添加一個帶有src屬性的腳本標記，該屬性是JS文件的URL。通常將此腳本標記放在頁面底部，以便首先加載頁面內容。我會更全面地解釋我的答案。 – Spycho

<input type="number" id="abc" onkeyup="s()"> 
<input type="submit" id="abc2" disabled > 
<script type="text/javascript"> 
function s(){ 
var i=document.getElementById("abc"); 
if(i.value=="") 
    { 
    document.getElementById("abc2").disabled=true; 
    } 
else 
    document.getElementById("abc2").disabled=false;}</script>

來源

2017-07-10 07:00:37

禁用按鈕，每當文本字段爲空動態

回答

相關問題