当文本字段动态为空时禁用按钮
下面是我的代码：
<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来实现这一点呢？
回答 6
Stack Overflow用户
发布于 2011-08-15 23:37:49
在单击该按钮以查看是否有任何文本时，添加检查。如果没有，则弹出一个警告框(或其他形式的反馈)，告诉用户输入数据，并且不要使用按钮功能。
示例：
<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>Stack Overflow用户
发布于 2018-05-02 05:14:41
最简单的方法是：
简单的Html和JavaScript :运行代码片段(只有7行)
function success() {
if(document.getElementById("textsend").value==="") {
document.getElementById('button').disabled = true;
} else {
document.getElementById('button').disabled = false;
}
}<textarea class="input" id="textsend" onkeyup="success()" name="demo" placeholder="Enter your Message..."></textarea>
<button type="submit" id="button" disabled>Send</button>
我已经使用了textarea，但是你可以使用任何html输入标签来试用它！祝你编码愉快！
Stack Overflow用户
发布于 2011-08-15 23:56:07
您可以轮询输入的值。这将降低效率和响应性，但可能更可靠。
正如您所指出的，当输入的值被清除时，keyup事件不一定会触发。如果他们用鼠标突出显示文本，右键单击并剪切，该怎么办？
change事件可能会有所帮助，但它仍然不是那么可靠。它只在模糊上触发，并遗漏了一些更改(如自动完成选择)。
下面是演示轮询解决方案的a jsFiddle。
为了回应Eng.Fuad的评论，下面是如何添加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>注意:您需要使您的脚本可在web上访问，以便浏览到http://www.your-site.com/path/to/someScript.js访问该脚本。
script标记位于正文的底部，因此页面首先加载实际内容，然后加载脚本。这意味着你的内容很快就会对你的用户可见了。
您应该对jsFiddle中的JavaScript进行最后一次修改。jsFiddle有运行"onDomReady“的代码(见小提琴左上角)。从技术上讲，如果在内容之后有脚本，就不需要这样做。它的作用是确保脚本在内容加载后运行，这样，如果脚本试图在DOM中查找元素，这些元素就已经加载并被找到。您可能应该将其添加到脚本中，以防(由于某些原因)将脚本移动到内容之前。为了在jQuery中将脚本包装在一个准备好dom的处理程序中，请执行以下操作：
$(function(){
// my code
});在该示例中，只有当页面准备就绪时，才会运行放置//my code注释代码。
https://stackoverflow.com/questions/7067005
复制相似问题
腾讯云开发者
