css Question posted in
Some basic documentation can be found here.

Use CSS to show which div will receive pasted text

I have 2 divs which can receive pasted text. They are not editable. How can I visually indicate which one will receive the paste event?

I tried using :focus, but it does nothing by default for divs. I added tabindex to the div, and then :focus worked, but if I click outside the div, it losses the focus attribute but still receives the pasted text

document.querySelectorAll("div").forEach(element => {
            element.addEventListener("paste", event => {
                event.preventDefault();
                const text = (event.clipboardData || window.clipboardData).getData("text");
                const words = text.split(' ').join('n');
                event.currentTarget.innerText = words;
            }
            )
        });
<div>aaa</div>
<div>bbb</div>
Tags:

3

Answers


  1. 0

    You could simply add a border to the div to make it obvious. If you have a dedicated CSS file:

    border-width:1px;
border-style:solid;
border-color:grey;

    You can play around with the color/thickness of the border but you probably want something a little more subtle.

    Inline:

    <div style="border: 1px solid grey"></div>

    You will need to set the style dynamically when the element is selected.

    Login or Signup to reply.
  2. 0

    You can’t get focused on DIV elements out of "onpaste" event listener. You have to create a null or hidden div "lastHiddenDIV" and add it to "onpaste" event listener but prevent it from updating it’s innerHTML using IF statement.
    and put them in a DIV as parent with CSS=overflow:hidden;

    HTML:

    <div style="border:1px solid blue;width:100%;height:100%;overflow:hidden;">
<div class="pasting">aaa</div>
<div class="pasting">bbb</div>
<div class="pasting" style="width:100%;height:100%;">lastHiddenDIV</div>
</div>

    JavaScript:

    <script>
let pastingEL=document.querySelectorAll(".pasting");
document.querySelectorAll(".pasting").forEach(element => {
            element.addEventListener("paste", event => {
                event.preventDefault();
                const text = (event.clipboardData || window.clipboardData).getData("text");
                const words = text.split(' ').join('n');
        if(event.currentTarget!=pastingEL[pastingEL.length-1]){
                event.currentTarget.innerText = words;
        }
            }
            )
        });
</script>
    Login or Signup to reply.
  3. 0

    Take a look at this and see if it might help you.

    You can only paste text if a div is focused.
    If no div is selected, the text will not be pasted.

    The div that is focused on will be highlighted with a distinct border.

    // Track the currently focused div
let currentTarget = null;

document.querySelectorAll("div").forEach(element => {
  // Add a click event to indicate focus
  element.addEventListener("click", (event) => {
    event.stopPropagation(); // Prevent global click handler from interfering
    if (currentTarget) {
      currentTarget.classList.remove("focused");
    }
    currentTarget = element;
    currentTarget.classList.add("focused");
  });

  // Handle paste event
  element.addEventListener("paste", event => {
    if (currentTarget === element) {
      event.preventDefault();
      const text = (event.clipboardData || window.clipboardData).getData("text");
      const words = text.split(' ').join('n');
      element.innerText = words;
    }
  });
});

// Global click handler to clear focus if clicking outside
document.addEventListener("click", () => {
  if (currentTarget) {
    currentTarget.classList.remove("focused");
    currentTarget = null;
  }
});
    div {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
  cursor: pointer;
}
div:hover {
  outline: 1px solid blue;
}
div.focused {
  outline: 2px solid blue;
}
    <div>aaa</div>
<div>bbb</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search