如何在jQuery选择器中定义css：focus状态？

Question

Here is a resizable textarea:

 var KeyDown; $(".TxtArea > div").mousedown(function(){ $(this).parent().addClass("Resize"); $("body").addClass("UnSelectable"); KeyDown = 1; $("textarea").css("opacity","0.3"); $("textarea").focus(function() { $(this).css("border-color","#ccc") }); }); $(document).mouseup(function(){ $(".TxtArea").removeClass("Resize"); $("body").removeClass("UnSelectable"); KeyDown = 0; $("textarea").css("opacity","1"); $("textarea").focus(function() { $(this).css("border-color","#07c") }); }); $(document).mousemove(function(Event){ if (KeyDown == 1 && $(".TxtArea").hasClass("Resize")) { var Height = Event.pageY - $(".TxtArea").children("textarea").offset().top; $("textarea").height(Height); } }); 

 textarea { border: 1px solid #ccc; outline:none; } textarea:focus{ border: 1px solid #07c; } .TxtArea { width: 300px; } .TxtArea > textarea { width: 100%; display: block; resize: none; box-sizing: border-box; } .TxtArea > div { height: 10px; background: #eee; border: 1px solid #ddd; box-sizing: border-box; text-align: center; line-height: 0px; } .TxtArea > div:hover { cursor: n-resize; } .UnSelectable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="TxtArea"> <textarea></textarea> <div>.....</div> </div> 

Please follow these steps:

• run the above fiddle
• write something on that textarea
• click on x-scroll bar on the bottom of textarea and keep it
• move your mouse and resize that textarea (Now border color is #ccc and opacity is 0.3 )
• after resizing, leave your finger from click (Now opacity will be 1 but border doesn't change)

Why border doesn't change? and how can I return it to #07c after unclicking. How can I do that? (I want something exactly like SO)

---

Note: I want to set #07c just only focus state of that textarea after unclicking (Not a permanent border)

Answer 1

So I'm not sure exactly why your focus code wasn't working, but in general, this is just better practice. Typically you want the css to handle all of the styling and the javascript just toggles it. It just keeps things cleaner and more organized.

So you can do this: https://jsfiddle.net/psp12a0n/

The main thing that was changed was this part in the javascript:

$(".TxtArea > div").mousedown(function(){
    $(this).parent().addClass("Resize");
    $("body").addClass("UnSelectable");
    KeyDown = 1;
    $("textarea").addClass('inactive');
});
$(document).mouseup(function(){
    $(".TxtArea").removeClass("Resize");
    $("body").removeClass("UnSelectable");
    KeyDown = 0;
    $("textarea").removeClass('inactive');
});

And this in the css:

textarea:focus,
textarea:active {
    border: 1px solid #07c;
}

textarea.inactive {
    opacity: .3;
    border-color: #ccc;
}

Hope this works for you!