如果 textarea 为空，则隐藏按钮的 Javascript 函数不起作用

Question

我在一个 div 中有一个 textarea，下面有一个选择下拉菜单，下面是两个按钮。一种是预览，另一种是用于将文本上传到文件。 如果 textarea 为空，我试图隐藏 Upload 按钮。我的 javascript 无法正常工作，因为它总是隐藏按钮。

这是表单、按钮容器和选择下拉菜单（所有选项都被省略了，因为它们有 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>

我已经看到了很多链接到他们的 JSFiddle 的答案，而且它们都运行良好。是什么导致我的不能正常工作？除了我的 JS 函数外，其他一切都很好。

Answer 1

原生 javascript 解决方案。

上传按钮从一开始是隐藏的，当为 textarea 触发 keyup 事件时，会检查 textarea 的内容并再次显示或隐藏按钮

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>

Answer 2

将您的处理程序附加到 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!! -->