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

这里是我的代码：禁用按钮，每当文本字段为空动态

<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

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

回答

相关问题