The essence of the problem: the user profile should be able to post on the wall. It is necessary that there was an input form - an input field, an "Attach" button and the "Submit" button. But with one caveat, if the input field is out of focus, they should be hidden. I implemented it using onfocus.

text.onfocus = function() { $("#success").fadeIn(1); }; text.onblur = function() { $("#success").fadeOut(1); }; 
 #success { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-post"> <form> <textarea name="text" id="text" class="login-forma" placeholder="Что у Вас нового?" rows="1"></textarea> <div class="addpost" id="success"> <a href="">Прикрепить</a> <input type="submit" value="Рассказать" name="add_post" class="btn btn-success" /> </div> </form> </div>

The problem is that if you press the attach button, or send, then, obviously, the text field loses focus and the click does not work, but simply hides the buttons. How to make them disappear only with the loss of focus of the field + loss of focus of the block itself with the buttons?

  • 2
    You should not evaluate the complexity of tasks that you can not solve. - vp_arth
  • Perhaps yes, you are right. But. Although I am very weak in JS, however, I guess that I just need to add a condition, but I cannot formulate it correctly. - Dmitry
  • If you add the rest of the form and code, you will quickly get a solution. Need to see the problem live. And now for this you need to do a lot of guesswork and body movements. - vp_arth
  • @vp_arth Added by - Дмитрий
  • @Anton Shchyrov Thank you so much! - Dmitry

3 answers 3

For example, add handlers to all form elements.

 $("#post *").focus( function() { $("#success").fadeIn(1); console.log("focus"); }).blur(function() { console.log("blur"); $("#success").fadeOut(1); }); 
 #success { display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-post"> <form id="post"> <textarea name="text" id="text" class="login-forma" placeholder="Что у Вас нового?" rows="1"></textarea> <div class="addpost" id="success"> <a href="">Прикрепить</a> <input type="submit" value="Рассказать" name="add_post" class="btn btn-success" /> </div> </form> </div>

    I suggest, as an option, to add a flag of finding the cursor over the form elements:

     (function () { // обработка флага var hoverButton = false; $('.form-ctrl').on('mouseover', function(){ hoverButton = true;}); $('.form-ctrl').on('mouseleave', function(){ hoverButton = false;}); function hide() { hoverButton = false; text.onblur(); } $('#add_post').on('click', function add_post(e) { e.preventDefault(); // не отправляем форму из сниппета console.log("Отправлено"); hide(); }); $('#attach').on('click', function() { console.log("Прикреплено"); hide(); }); text.onblur = function() { if (!hoverButton) $("#success").fadeOut(1); }; text.onfocus = function() { $("#success").fadeIn(1); }; })(); 
     #success { display: none; } .as-console-wrapper {max-height: 30%!important;} 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-post"> <form> <textarea name="text" id="text" class="login-forma" placeholder="Что у Вас нового?" rows="1"></textarea> <div class="addpost" id="success"> <a href="javascript:" id="attach" class="form-ctrl">Прикрепить</a> <input id="add_post" type="submit" value="Рассказать" name="add_post" class="btn btn-success form-ctrl" /> </div> </form> </div>

    • @ Dmitry, By pressing the form performs its action (output to the console) and the controls are hidden (the hide function call is responsible for this), leading the form to its original state. You may change this behavior. - vp_arth

    Isn't it easier to implement the same functionality without using JS itself?

    Add to CSS and remove or comment out the hiding of #success :

     #success { display: none; } #text:focus + #success { display: block; } #success:hover { display: block; } 
     <div class="form-post"> <form> <textarea name="text" id="text" class="login-forma" placeholder="Что у Вас нового?" rows="1"></textarea> <div class="addpost" id="success"> <a href="">Прикрепить</a> <input type="submit" value="Рассказать" name="add_post" class="btn btn-success" /> </div> </form> </div>