我正在寻找 HTML 属性的更多选项/信息：“contenteditable = 'true'”和 javascript：“focus()”function

Question

I would like to learn more about the "HTML contenteditable =' true '" attribute and the javascript focus () function. For example, I would like to know how I can influence the position of the focused line or how to edit the background of a focused line. I have already googled some things but I can't find the right information.

Does anyone have a good tip?

Answer 1

You can check which element is on focus by writing in the Google Chrome console:

document.activeElement

The contenteditable attribute specifies whether the content of an element is editable or not.

If you want to trigger the focus on a contenteditable element you can do it by:

$(".contenteditableClassName").focus();

Any other background change on this element is done by CSS for example you can use

    .no-touchevents &:hover, &:focus, &:active {
        border-color: white;
        color: blue;

You can apply different changes on the element on focus this way.

Also you can remove the focus border on click by using:

        .pointer-focus &:focus {
        outline: none;
        }