Question

这是我的代码：

<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？

Answer 1

单击按钮时添加检查以查看是否有任何文本。如果没有，则弹出一个警告框（或其他形式的反馈）告诉用户输入数据，而不是按钮功能。

示例：

<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>

Answer 2

最简单的方法： -

简单的Html和JavaScript：运行代码段（只需7行）

＆＃13;

function success() {
	 if(document.getElementById("textsend").value==="") { 
            document.getElementById('button').disabled = true; 
        } else { 
            document.getElementById('button').disabled = false;
        }
    }

＆＃13;

<textarea class="input" id="textsend" onkeyup="success()" name="demo" placeholder="Enter your Message..."></textarea>
<button type="submit" id="button" disabled>Send</button>

＆＃13;

我使用过textarea，但你可以使用任何html输入标签并试一试！快乐的编码！

Answer 3

您可以轮询输入的值。这样效率较低，反应较慢，但可能更可靠。

正如您所指出的，当清除输入值时，不会触发keyup事件。如果用鼠标突出显示文本，右键单击并剪切，该怎么办？

改变事件可能有所帮助，但它仍然不是那么可靠。它只会在模糊时触发，并且会忽略一些更改（如自动完成选择）。

这是展示投票解决方案的a jsFiddle。

在回应Eng.Fouad的评论时，这里是如何添加JS：

您可以将其放在脚本标记中，如下所示：

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

这样可行，但这意味着用户的浏览器不会缓存JavaScript，这意味着加载页面需要更长时间。将脚本与内容分开也更简洁。但如果你想要一个快速简便的选择，这应该做到。把它放在身体的底部并将它包裹在一个dom ready处理程序中（参见答案的底部）。

作为一个更干净的选项，您可以将其放在外部文件中，例如someScript.js，其内容将是您的JavaScript（没有脚本标记）。然后，您可以从HTML文件链接到该脚本：

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

注意：您需要使您的脚本Web可访问，以便浏览到http://www.your-site.com/path/to/someScript.js访问该脚本。

脚本标记位于正文的底部，以便页面首先加载实际内容，然后加载脚本。这意味着您的用户可以更快地看到您的内容。

您应该对jsFiddle中的JavaScript进行最后一次修改。 jsFiddle的代码运行“onDomReady”（见小提琴的左上角）。从技术上讲，如果您的内容后面有脚本，则无需执行此操作。它是为了确保脚本在内容加载后运行，因此如果脚本尝试在DOM中查找元素，则它们已被加载并被找到。您应该将此脚本添加到脚本中（出于某种原因）将脚本移动到内容之前。为了将您的脚本包装在jQuery中的dom ready处理程序中，请执行以下操作：

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

在该示例中，只有在页面准备就绪时，才会运行放置//my code注释的代码。

Answer 4

 <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>

Answer 5

这对我有用。我希望它对其他人有用。当用户没有任何文本或删除文本时，我需要禁用该按钮。

$('#textarea').on('keypress keyup keydown', function () { 
  if ($('#textarea').val() == "" ) { 
    $('#savebtn').prop('disabled', true); 
  } 
  else {   
    $('#savebtn').prop('disabled', false); 
  } 
});

$('#textarea').on('keypress keyup keydown', function () { 
  if ($('#textarea').val() == "" ) { 
    $('#savebtn').prop('disabled', true); 
  } 
  else {   
    $('#savebtn').prop('disabled', false); 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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/>

Answer 6

默认情况下，此处按钮处于禁用状态，并且在触发键入事件时，请检查文本字段的长度是否为零。如果为零，则禁用按钮，否则启用。

<head>
    <title>Testing...</title>
</head>

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

    <script type="text/javascript">


        function btnActivation(){

            if(!document.getElementById('myText').value.length){
                document.getElementById("start_button").disabled = true;            
            }else{
                document.getElementById("start_button").disabled = false;

            }           
        }   

    </script>
</body>

每当文本字段动态为空时禁用按钮

6 个答案: