How can you tell if a contenteditable div is currently in focus?

Question

How can you tell if a contenteditable div is currently in focus?

Essentially, my setup consists of:

HTML:

<div class="div1">
  <div class="as-text-box" contenteditable="true"></div>
</div>

CSS:

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}
[contentEditable=true]:focus .div1{
    border:1px solid black;
}

Specifically, I am looking to change the border color of div1 to black when as-text-box is focused.

I have also attempted to achieve this using JQuery but have not been successful.

JQuery:

$(function(){
    if ($(".as-text-box").is(":focus")) {
        alert("Has Focus");
    } else {
        alert("Doesn't Have Focus");
    }
});

Jsfiddle: https://jsfiddle.net/2xn5rj2y/

Any help and suggestions would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

To change the border of a parent element when a child element is focused using a CSS selector, you will need to use Javascript.

Here is an example of how to attach a listener to the blur and focus events of the editable div to achieve this effect:

$(".as-text-box").on("focus", function() {
    $(".div1").addClass("focusClass");
});

$(".as-text-box").on("blur", function() {
    $(".div1").removeClass("focusClass");
});

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}

.div1.focusClass {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div1">
  <div class="as-text-box" contenteditable="true"></div>
</div>

Answer 2

To change the border of a parent element when a child element is focused using a CSS selector, you will need to use Javascript.

Here is an example of how to attach a listener to the blur and focus events of the editable div to achieve this effect:

$(".as-text-box").on("focus", function() {
    $(".div1").addClass("focusClass");
});

$(".as-text-box").on("blur", function() {
    $(".div1").removeClass("focusClass");
});

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}

.div1.focusClass {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="div1">
  <div class="as-text-box" contenteditable="true"></div>
</div>

Answer 3

Answer №2

Your specific selector:

[contentEditable=true]:focus .div1

attempts to target a class called div1 within a contentEditable element that is in focus. However, this approach seems to be incorrect as the .div1 element is actually the parent of the contentEditable element.

By simply removing the .div1 part from the selector, the issue can be resolved:

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}
[contentEditable=true]:focus{
border:1px solid black;
  outline:none;
}

<div class="div1">
  <div class="as-text-box" contenteditable="true">
  
  </div>
</div>

Alternatively, if there are other reasons necessitating the selection on div1, reversing the order might also resolve the issue. However, the former solution appears to be the most straightforward unless there are additional requirements to consider.

Answer 4

Your specific selector:

[contentEditable=true]:focus .div1

attempts to target a class called div1 within a contentEditable element that is in focus. However, this approach seems to be incorrect as the .div1 element is actually the parent of the contentEditable element.

By simply removing the .div1 part from the selector, the issue can be resolved:

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}
[contentEditable=true]:focus{
border:1px solid black;
  outline:none;
}

<div class="div1">
  <div class="as-text-box" contenteditable="true">
  
  </div>
</div>

Alternatively, if there are other reasons necessitating the selection on div1, reversing the order might also resolve the issue. However, the former solution appears to be the most straightforward unless there are additional requirements to consider.

Answer 5

Answer №3

If you're looking to customize the outline css attribute, you can use the following code:

CSS

outline:none;

For more information, you can visit this link.

Another option is to target the parent element and add a border using jQuery: .parent().css("border","1px solid #000");

Answer 6

If you're looking to customize the outline css attribute, you can use the following code:

CSS

outline:none;

For more information, you can visit this link.

Another option is to target the parent element and add a border using jQuery: .parent().css("border","1px solid #000");

Answer 7

Answer №4

It is impossible to achieve this using CSS alone (selecting the parent element), but you can accomplish it with jQuery using the focusin and focusout events to manipulate the parent element as needed.

$('.as-text-box').on('focusin', function(){
  /** when focused, add border to the parent element **/
  $(this).parent().css({'border':'1px solid black'});
}).on('focusout', function(){
  /** when focus is lost, remove the border **/
  $(this).parent().css({'border':''}); 
});

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <div class="as-text-box" contenteditable="true">
  </div>
</div>

Answer 8

It is impossible to achieve this using CSS alone (selecting the parent element), but you can accomplish it with jQuery using the focusin and focusout events to manipulate the parent element as needed.

$('.as-text-box').on('focusin', function(){
  /** when focused, add border to the parent element **/
  $(this).parent().css({'border':'1px solid black'});
}).on('focusout', function(){
  /** when focus is lost, remove the border **/
  $(this).parent().css({'border':''}); 
});

.div1{
  position:absolute;
  height:50px;
  width:200px;
  background:white;
  border:1px solid #ccc;
}
.as-text-box{
  position:absolute;
  height:30px;
  width:90%;
  background:#ddd;
  top:10px;
  left:5%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
  <div class="as-text-box" contenteditable="true">
  </div>
</div>

Answer 9

Answer №5

This code provides a simple solution. The border of the element with focus will turn black, and once it loses focus, it reverts back to #ccc.

$('.as-text-box').on('focus', function() {
$('.div1').css("borderColor", "black");
$(this).on('focusout', function() {
    $('.div1').css("borderColor", "#ccc");
});

});

Check out the code in JSfiddle

Answer 10

This code provides a simple solution. The border of the element with focus will turn black, and once it loses focus, it reverts back to #ccc.

$('.as-text-box').on('focus', function() {
$('.div1').css("borderColor", "black");
$(this).on('focusout', function() {
    $('.div1').css("borderColor", "#ccc");
});

});

Check out the code in JSfiddle

How can you tell if a contenteditable div is currently in focus?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Prevent Click Event in JQuery

Error: Invalid Argument - The argument 'PanelController' is expected to be a function, but it is undefined

HighStock chart malfunctioning with inaccurate epoch datetime display

Encountering a problem with the scope of child_process in Node

Having trouble with JQuery toggle()? Need some assistance with fixing it?

The video in the TypeScript code within the Owl Carousel is not displaying properly - only the sound is playing. The video screen remains stationary

iOS SDK - The Ultimate Tool to Unlock HTML 5 Player

Find the ID of the clicked table row using HTML and JavaScript

Employing ng-show and other related features within directive "A"

Ways to switch out error message for an error landing page

Using jQuery to reveal or conceal content based on a particular class

Issue with Node REST API: PUT request is failing to update data in the request

Accessing an array within a function from a separate .JS file

Jquery is causing some issues with the code provided:

Exploring the concept of multi-level mapping within Next.js

Importing JSON data from a URL to display in an HTML table

Automatically populate fields when the selection changes

Having trouble with the mouse trail code on codepen.io

I am encountering difficulties while attempting to generate the chart series in Highcharts

Transforming a curl command into a jQuery $.ajax() call using JavaScript