我需要帮助，以使“提交”按钮仅在您在文本框中输入内容时显示

Question

我使用的是html，我有一个文本框，并且我还有提交按钮，但是我只希望当您在文本框中输入文本时显示该按钮。如果这样做的话，我的脚本中也有很多php。

我在点击事件上尝试了不同的方法，并且在所有地方都进行了搜索，但找不到任何东西。我知道这可能是一个简单的问题，但我完全被卡住了。

<div class = "profileLeftSideContent">

<form action="<?php echo $username; ?>" method="post">

<textarea id="post" name="post" rows="15" cols="40" placeholder="Bio goes 
here...">
</textarea>

<input id="buddon" type="submit" name="send" 
value="Save" style="background-color: #DCE5EE; border: 3px solid #666; 
color:#666; height: 65px; width: 73px;">

    </form>
</div>

我希望仅在您在上面的文本区域中键入时才显示名为保存的按钮。 （请注意，代码更多，文本框和按钮正常显示）

Answer 1

这很简单：

function ckField(){
  if($.trim($('#post').val()) == ""){
    $('#buddon').css('display', 'none');
  }else{
    $('#buddon').css('display', '');
  }
}

$('#post').keyup(function(){ ckField(); });

//initial state
ckField();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "profileLeftSideContent">

<form action="<?php echo $username; ?>" method="post">

<textarea id="post" name="post" rows="5" cols="40" placeholder="Bio goes 
here...">
</textarea>

<input id="buddon" type="submit" name="send" 
value="Save" style="background-color: #DCE5EE; border: 3px solid #666; 
color:#666; height: 65px; width: 73px;">

    </form>
</div>

出于显示原因，我将textara行减少为5。