当textarea专注于jQuery时，如何单击按钮？

Question

我使用jQuery的focus（）在聚焦时改变textarea。但是，我需要单击焦点区域外的提交按钮。提交按钮目前仅在textarea未聚焦后才起作用。这是我的代码

＆＃13;

＆＃13;

$(document).ready(function(){
  $("#post").focus(function(){
    $(this).css({'border-color':'green', 'height':'120px'});
  });

  $("#post").blur(function(){
    $(this).css({'border-color':'#bfbfbf', 'height':'50px'});
  });
});

function submit(){
  $('#post').val('');
}

＆＃13;

textarea{
  border-radius: 3px;
  resize: none;
  width: 300px;
  height: 50px;
  font-size: 20px;
  padding: 10px;
  border: 2px solid #bfbfbf;
}

textarea:focus {
  outline: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="post" cols="52" id="post" placeholder="Post.." onclick="focusasd()"></textarea>
<br>
<input type="button" name="submit" value="Submit" id="submit" onclick="submit()"/>

＆＃13;

＆＃13;

＆＃13;

这是jsfiddle。即使在重点关注textarea时，如何使提交按钮工作。感谢。

Answer 1

您可以使用解决方案https://jsfiddle.net/0ug2e5s4/4/

$(document).ready(function(){
  $("#post").focus(function(){
    $(this).css({'border-color':'green', 'height':'120px'});
    $('#submit').trigger('click');
  });

  $("#post").blur(function(){
    $(this).css({'border-color':'#bfbfbf', 'height':'50px'});
  });
});

function submit(){
  //Do Something
  console.log("FSDf"); 
  $('#post').val('');
}

textarea{
  border-radius: 3px;
  resize: none;
  width: 300px;
  height: 50px;
  font-size: 20px;
  padding: 10px;
  border: 2px solid #bfbfbf;
}

textarea:focus {
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="post" cols="52" id="post" placeholder="Post.."></textarea>
<br>
<input type="button" name="submit" value="Submit" id="submit" onclick="submit()"/>

希望这会对你有所帮助。

Answer 2

试试此代码

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#post").focus(function() {
    $(this).css({
      'border-color': 'green',
      'height': '120px'
    });
    
    $("#submit").click(); 
    
    
  });
  
  
   $("#submit").click(function(){
        console.log("button");
    }); 

  $("#post").blur(function() {
    $(this).css({
      'border-color': '#bfbfbf',
      'height': '50px'
    });
  });
});

function submit() {
  //Do Something
  $('#post').val('');
}

＆＃13;

textarea {
  border-radius: 3px;
  resize: none;
  width: 300px;
  height: 50px;
  font-size: 20px;
  padding: 10px;
  border: 2px solid #bfbfbf;
}

textarea:focus {
  outline: none;
}

＆＃13;

<textarea name="post" cols="52" id="post" placeholder="Post.." ></textarea>
<br>
<input type="button" name="submit" value="Submit" id="submit" onclick="submit()" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;