How to define the css :focus state in a jQuery selector?


Tags: javascript,jquery,html,css

Problem :

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)



Solution :

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!


    CSS Howto..

    How to reduce the number of sprites when using css sprite technique

    How do I avoid multiple jquery dropdown boxes interfering with eachother

    How to place a div right below another div?

    How do I use CSS to centre this content?

    How to make blur effect without white light?

    how to make the images always in center

    How to set the background image width using CSS?

    show/hide css menu item depending user role using asp.net

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    How to move a block of content to the right of another block without moving it in the DOM

    How to create a Vertical Strikethrough in CSS?

    How can I see “:hover” and “:active” properties of elements on a webpage? [duplicate]

    how to make body tag elastic?

    How to access CSS children properly?

    How to change CSS where id=array(index)?

    How can I convert a SASS file to a CSS file in an ANT task?

    How to get inner and outer width to a single element?

    How to get rid of space and align two objects in one line in css/html?

    How to apply CSS to nested Unordered Lists?

    How to enable real time CSS editing in chrome?

    CSS: How can I have a
    within a expand the table horizontally?
    To answer your first question and to supplement LJ's answer: Here is the relevant part of the spec to explain why the table expands to contain the inner div and...
    Read more

    How to specify size of thumbnails for photos that are hosted externally?

    How do I interact with @font-face definitions using the Chrome debugger?

    Jquery Toggle Button image and Div Show/Hide

    How to make triangle section separator [closed]

    How to modify CSS when requirements change?

    How to draw random lines with CSS to replicate effect [closed]

    2nd image appears as mirror image in IE— CSS image FLIP transform- How to fix?

    how to use variables when setting CSS properties in Jquery?

    How can I control button margins using CSS (IE8 compatible)