Question

这是一个可调整大小的textarea：

＆＃13;

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);
    }
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

请按以下步骤操作：

运行以上小提琴
在textarea上写点什么
点击textarea底部的x滚动条并保留
移动鼠标并调整该textarea的大小（现在边框颜色为#ccc，不透明度为0.3）
，让手指不要点击（现在不透明度为1，但边框不会改变）

为什么边界不会改变？以及如何在取消点击后将其返回#07c。我怎样才能做到这一点？（我想要一些完全像SO的东西）

注意：我想在取消点击（不是永久边框）后，只设置#07c该文本区域的focus状态

Answer 1

因此，我不确定您的焦点代码无法正常工作，但总的来说，这只是更好的做法。通常你希望css处理所有的样式和javascript只是切换它。它只是让事情更清洁，更有条理。

所以你可以这样做：https://jsfiddle.net/psp12a0n/

改变的主要内容是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');
});

这在css中：

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

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

希望这适合你！

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

1 个答案: