Question

我在div中有一个textarea，下面有一个选择下拉列表，下面是两个按钮。一种是预览，另一种是将文本上传到文件。如果textarea为空，我试图隐藏上传按钮。我的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的内容并再次显示或隐藏按钮

＆＃13;

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

＆＃13;

.hidden {
  display:none;
}

＆＃13;

<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>

＆＃13;

Answer 2

将您的处理程序附加到textarea＆＃39; keyup＆＃39;事件。（从隐形btn开始。）

＆＃13;

ul.collection {
  max-height: 100px;
  overflow: scroll;
  list-style-type: none; /* not sure if you need this. Hides bullet list dots */
}

li.collection-item:first-child {
  background-color: white; /* should be the same as the background color behind the list */
  position: fixed;
}

＆＃13;

$(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();
    }
});

＆＃13;

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

2 个答案: