blocks|key|2019584|text|在单击该按钮以查看是否有任何文本时，添加检查。如果没有，则弹出一个警告框(或其他形式的反馈)，告诉用户输入数据，并且不要使用按钮功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2019585|示例：|2019586|<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>|code-block|syntax|javascript|2019587|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Add a check when the button is clicked to see if there is any text. If there isn't, pop up an alert box (or some other form of feedback) to tell the user to enter data, and don't do the button functionality.</p>

<p>Example:</p>

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

&lt;script type="text/javascript"&gt;
    function stoppedTyping(){
        if(this.value.length &gt; 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
        }
    }
&lt;/script&gt;
</code></pre>


blocks|key|3633279|text|您可以轮询输入的值。这将降低效率和响应性，但可能更可靠。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3633280|正如您所指出的，当输入的值被清除时，keyup事件不一定会触发。如果他们用鼠标突出显示文本，右键单击并剪切，该怎么办？|3633281|change事件可能会有所帮助，但它仍然不是那么可靠。它只在模糊上触发，并遗漏了一些更改(如自动完成选择)。|3633282|下面是演示轮询解决方案的a+jsFiddle。|offset|length|3633283|3633284|为了回应Eng.Fuad的评论，下面是如何添加JS的：|3633285|您可以将其放在脚本标记中，如下所示：|3633286|<script+type="text/javascript">
++++//my+code
</script>|code-block|syntax|javascript|3633287|这是可行的，但这意味着用户的浏览器不会缓存JavaScript，这意味着加载页面需要更长的时间。把你的脚本和你的内容分开也更干净。但是，如果您想要一个快速而简单的选择，这应该可以。把它放在你身体的底部，并把它包装在一个准备好dom的处理程序中(参见答案的底部)。|3633288|作为一种更简洁的选择，您可以将其放在一个外部文件中，例如someScript.js，该文件的内容将是您的JavaScript+(没有脚本标记)。然后，您可以从HTML文件链接到该脚本：|3633289|<html>
++++<head></head>
++++<body>
++++++++
++++++++<script+type="text/javascript"+src="/path/to/someScript.js"></script>
++++</body>
</html>|3633290|注意:您需要使您的脚本可在web上访问，以便浏览到http://www.your-site.com/path/to/someScript.js访问该脚本。|style|CODE|3633291|script标记位于正文的底部，因此页面首先加载实际内容，然后加载脚本。这意味着你的内容很快就会对你的用户可见了。|3633292|3633293|您应该对jsFiddle中的JavaScript进行最后一次修改。jsFiddle有运行"onDomReady“的代码(见小提琴左上角)。从技术上讲，如果在内容之后有脚本，就不需要这样做。它的作用是确保脚本在内容加载后运行，这样，如果脚本试图在DOM中查找元素，这些元素就已经加载并被找到。您可能应该将其添加到脚本中，以防(由于某些原因)将脚本移动到内容之前。为了在jQuery中将脚本包装在一个准备好dom的处理程序中，请执行以下操作：|3633294|$(function(){
++++//+my+code
});|3633295|在该示例中，只有当页面准备就绪时，才会运行放置//my+code注释代码。|3633296|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/Spycho/zVYNj/^0|0|0|0|C|A|0|0|0|0|0|0|0|0|0|P|1A|0|0|0|0|0|N|9|0^^$0|@$1|2|3|4|5|6|7|1K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1L|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1M|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1N|8|@]|9|@$H|1O|I|1P|1|1Q]]|A|$]]|$1|J|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1S|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1T|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1U|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1V|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1W|8|@]|9|@]|A|$]]|$1|X|3|Y|5|Q|7|1X|8|@]|9|@]|A|$R|S]]|$1|Z|3|10|5|6|7|1Y|8|@$H|1Z|I|20|11|12]]|9|@]|A|$]]|$1|13|3|14|5|6|7|21|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|23|8|@]|9|@]|A|$]]|$1|18|3|19|5|Q|7|24|8|@]|9|@]|A|$R|S]]|$1|1A|3|1B|5|6|7|25|8|@$H|26|I|27|11|12]]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|28|8|@]|9|@]|A|$]]]|1D|$1E|$5|1F|1G|1H|A|$1I|1J]]]]

<p>You could poll the value of the input. This would be less efficient and less responsive but potentially more reliable.</p>
<p>As you pointed out, the keyup event won't neccessarily fire when an input's value is cleared. What if they highlight the text with the mouse, right click and cut?</p>
<p>The change event might help, but it's still not all that reliable. It only fires on blur, and misses some changes (like an autocompletion selection).</p>
<p>Here's <a href="https://jsfiddle.net/Spycho/zVYNj/" rel="nofollow noreferrer">a jsFiddle</a> demonstrating the polling solution.</p>
<hr />
<p>In response to Eng.Fouad's comment, here's how to add the JS:</p>
<p>You could put it in a script tag, like this:</p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    //my code
&lt;/script&gt;
</code></pre>
<p>That will work, but it will mean that your user's browser won't cache the JavaScript, meaning it will take longer to load your page. It's also cleaner to separate your scripts from your content. But if you want a quick and easy option, this should do. Put this at the bottom of your body and wrap it in a dom ready handler (see the bottom part of the answer).</p>
<p>As a cleaner option, you can put it in an external file e.g. someScript.js, the contents of which would be your JavaScript (with no script tags). You then link to that script from your HTML file:</p>
<pre><code>&lt;html&gt;
    &lt;head&gt;&lt;/head&gt;
    &lt;body&gt;
        &lt;!-- contents of page --&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;/path/to/someScript.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>NB: You need to make your script web accessible so that browsing to <code>http://www.your-site.com/path/to/someScript.js</code> accesses the script.</p>
<p>The script tag is at the bottom of the body so that the page loads the actual content first, and the scripts afterwards. This will mean that your content is visible to your users sooner.</p>
<hr />
<p>You should make one last modification to the JavaScript in the jsFiddle. The jsFiddle has the code running &quot;onDomReady&quot; (see top left of the fiddle). Technically, you don't need to do this if you have your script after your content. It's there to ensure that the script runs after the content has loaded, so that if the script attempts to find elements in the DOM, they have been loaded, and are found. You should probably add this to the script in case (for some reason) you move the script to before the content. In order to wrap your script in a dom ready handler in jQuery, do this:</p>
<pre><code>$(function(){
    // my code
});
</code></pre>
<p>In that example, code put where the <code>//my code</code> comment is will be run only when the page is ready.</p>


blocks|key|3633301|text|+<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3633302|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|3919011|text|最简单的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3919012|简单的Html和JavaScript+:运行代码片段(只有7行)|3919013|​|3919014|function+success()+{
	+if(document.getElementById("textsend").value==="")+{+
++++++++++++document.getElementById('button').disabled+=+true;+
++++++++}+else+{+
++++++++++++document.getElementById('button').disabled+=+false;
++++++++}
++++}|code-block|syntax|javascript|3919015|<textarea+class="input"+id="textsend"+onkeyup="success()"+name="demo"+placeholder="Enter+your+Message..."></textarea>
<button+type="submit"+id="button"+disabled>Send</button>|3919016|3919017|我已经使用了textarea，但是你可以使用任何html输入标签来试用它！祝你编码愉快！|3919018|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|U|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>Easiest way to do it :-</p>

<p>Simple Html and JavaScript : Run the snippet (Just 7 lines)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function success() {
	 if(document.getElementById("textsend").value==="") { 
            document.getElementById('button').disabled = true; 
        } else { 
            document.getElementById('button').disabled = false;
        }
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea class="input" id="textsend" onkeyup="success()" name="demo" placeholder="Enter your Message..."&gt;&lt;/textarea&gt;
&lt;button type="submit" id="button" disabled&gt;Send&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>I have used textarea, but you can use any html input tags and try it out!
Happy coding!</p>


blocks|key|3633392|text|这里默认关闭按钮，当keyup事件被触发时，检查文本字段的值是否为零。如果为零，则禁用按钮，否则启用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3633393|​|3633394|<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>|code-block|syntax|javascript|3633395|3633396|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Here button is disabled by default and when keyup event is triggered, check if text field value is length is zero or not. If zero then button is disabled, else enabled.</p>

<p></p>

<pre><code>&lt;head&gt;
    &lt;title&gt;Testing...&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;input id="myText" type="text"  onkeyup="btnActivation()"&gt;
    &lt;input type="button" value="Click to begin!" id="start_button" disabled/&gt; 

    &lt;script type="text/javascript"&gt;


        function btnActivation(){

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

            }           
        }   

    &lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p></p>


blocks|key|3633434|text|这就是对我有效的方法。我希望它适用于其他人。我需要禁用按钮时，用户没有任何文本或当他们删除文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3633435|$('#textarea').on('keypress+keyup+keydown',+function+()+{+
++if+($('#textarea').val()+==+""+)+{+
++++$('#savebtn').prop('disabled',+true);+
++}+
++else+{+++
++++$('#savebtn').prop('disabled',+false);+
++}+
});|code-block|syntax|javascript|3633436|​|3633437|$('#textarea').on('keypress+keyup+keydown',+function+()+{+
++if+($('#textarea').val()+==+""+)+{+
++++$('#savebtn').prop('disabled',+true);+
++}+
++else+{+++
++++$('#savebtn').prop('disabled',+false);+
++}+
});|3633438|<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/>|3633439|3633440|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|R|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|M|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>This is what worked for me. I hope it works for someone else. I needed the button disabled when the user didn't have any text or when they deleted the text.</p>
<pre><code>$('#textarea').on('keypress keyup keydown', function () { 
  if ($('#textarea').val() == &quot;&quot; ) { 
    $('#savebtn').prop('disabled', true); 
  } 
  else {   
    $('#savebtn').prop('disabled', false); 
  } 
});
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('#textarea').on('keypress keyup keydown', function () { 
  if ($('#textarea').val() == "" ) { 
    $('#savebtn').prop('disabled', true); 
  } 
  else {   
    $('#savebtn').prop('disabled', false); 
  } 
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="text" onkeyup="if(this.value.length &gt; 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_button').disabled = true;"/&gt;
&lt;input type="button" value="Click to begin!" id="start_button" disabled/&gt;</code></pre>
</div>
</div>
</p>


<p>Here's my code:</p>

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

<p>This works but still not efficient since the user can delete the text inside the text box and click the button while he's holding on DELETE key. Is there a more efficient way to achieve this using javascript?</p>


Disable button whenever a text field is empty dynamically

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

下面是我的代码：<input type="text" onkeyup="if(this.value.length > 0) document.getElementById('start_button').disabled = false; else document.getElementById('start_butt...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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