Javascript 文本区域为空时隐藏按钮的功能不起作用

Question

我在 div 中有一个文本区域，下面有一个 select 下拉菜单，下面是两个按钮。一个是预览，另一个是将文本上传到文件。如果文本区域为空，我试图隐藏上传按钮。我的 javascript 不工作，因为它总是隐藏按钮。

这是表单、按钮容器和 select 下拉菜单（由于有 20 个选项，所以省略了所有选项）：

<div class="container">
<label for="text-area">Paste your code here: </label>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
    <textarea name="code_input" id="code_textarea" class="form-control" rows="15" placeholder="Start coding!" required><?= isset($_POST['code_input']) ? $_POST['code_input'] : '' ?></textarea>
    <div class="button-container">
        <select required name="language-select" class="form-control" id="language_selector">
            <option value="" selected disabled>Language</option>
            <option>20 options follow</option>
<!-- THIS WILL KEEP THE VALUE IN THE DROPDOWN AFTER SUBMIT -->
            <script type="text/javascript">
                document.getElementById('language_selector').value = "<?php echo $_POST['language-select'];?>";
            </script>
        </select>
        <br/>
        <br/>
        <div id="button-container" class="btn-toolbar">
            <button id="drive_submit_btn" class="btn btn-md" type="submit">Preview</button>
            <button id="upload_btn" class="btn btn-md" type="submit">Upload</button>
        </div>
    </div>
</form>
<div class="show-code">
    <script src="lib/prism.js"></script>
    <!-- THIS DISPLAYS THE CODE AFTER SUBMITTING USING THE PRISM.JS PLUGIN FOR SYNTAX HIGHLIGHTING -->
    <!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code -->
    <pre><code class="language-<?php echo $language ?>"><?php echo $user_code; ?></code></pre>
</div>
    </div>


<!-- THIS IS THE JAVASCRIPT TO HIDE THE BUTTON UNTIL TEXT IS ENTERED.-->
<!-- HOWEVER IT ALWAYS HIDES IT!! -->

<script>
$(document).ready(function() {
 /* I EVEN TRIED TO TRIM IT TO NO AVAIL */
    var content = $.trim($('#code_textarea').val());
    if(content.length === 0) {
        $('#upload_btn').hide();
    } else {
        $('#upload_btn').show();
    }
});
</script>

我看到了很多 link 对他们的 JSFiddle 的回答，而且它们都工作正常。是什么导致我的无法正常工作？除了我的 JS 函数，其他一切正常。

Answer 1

将您的处理程序附加到 textarea 的 'keyup' 事件。（并从不可见的 btn 开始。）

$(document).keyup('.code_textarea',function() {
 /* I EVEN TRIED TO TRIM IT TO NO AVAIL */
    var content = $.trim($('#code_textarea').val());
    if(content.length === 0) {
        $('#upload_btn').hide();
    } else {
        $('#upload_btn').show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<label for="text-area">Paste your code here: </label>
<form method="post" >
    <textarea name="code_input" id="code_textarea" class="form-control" rows="5" placeholder="Start coding!" required></textarea>
    <div class="button-container">
        <select required name="language-select" class="form-control" id="language_selector">
            <option value="" selected disabled>Language</option>
            <option>20 options follow</option>
<!-- THIS WILL KEEP THE VALUE IN THE DROPDOWN AFTER SUBMIT -->
            <script type="text/javascript">
                document.getElementById('language_selector').value = "";
            </script>
        </select>
        <br/>
        <br/>
        <div id="button-container" class="btn-toolbar">
            <button id="drive_submit_btn" class="btn btn-md" type="submit">Preview</button>
            <button style="display:none" id="upload_btn" class="btn btn-md" type="submit">Upload</button>
        </div>
    </div>
</form>
<div class="show-code">
    <script src="lib/prism.js"></script>
    <!-- THIS DISPLAYS THE CODE AFTER SUBMITTING USING THE PRISM.JS PLUGIN FOR SYNTAX HIGHLIGHTING -->
    <!-- Get language selection from dropdown and append it to language class. Echo the text as highlighted code -->
    <pre><code class="language-"></code></pre>
</div>
    </div>


<!-- THIS IS THE JAVASCRIPT TO HIDE THE BUTTON UNTIL TEXT IS ENTERED.-->
<!-- HOWEVER IT ALWAYS HIDES IT!! -->

Answer 2

原生 javascript 解决方案。

上传按钮从一开始就隐藏了，当为文本区域触发 keyup 事件时，将检查文本区域的内容并再次显示或隐藏按钮

code_textarea.addEventListener('keyup', function(){
 if(code_textarea.value){
  upload_btn.classList.remove("hidden");
 }
 else {
  upload_btn.classList.add("hidden");
 }
});

.hidden {
  display:none;
}

<textarea name="code_input" id="code_textarea" class="form-control" rows="5" placeholder="Start coding!" required></textarea>

<button id="upload_btn" class="btn btn-md hidden" type="submit">Upload</button>

Javascript 文本区域为空时隐藏按钮的功能不起作用

Javascript function to hide button if textarea is empty does not work

html

javascript

php

jquery

textarea