div contentEditable ale Readonly

Question

Mam div z tekstem i chcę, gdy kursor jest najechanie na ten div, aby wybrać tekst. Jeśli zostawię ten element taki, jaki jest, próbując wybrać wszystkie (CTRL + A), wybieram całą zawartość strony, co oznacza cały tekst.

Aby się tego pozbyć, muszę użyć atrybutu contenteditable tego elementu div.

Ale nie chcę, aby ludzie, aby zmienić tekst/Kopiuj/Wytnij i tak dalej

Staram się używać tylko do odczytu dla tego div, ale nie działa.

Masz radę?

PS1: Ten element div zawiera również inne znaczniki (zawartość HTML), ale nie sądzę, że jest to problem.

PS2: Przykład jest tutaj: jsfiddle.net/msakamoto_sf/wfae8hzv/ - ale z pewnym problemem. Można wyciąć tekst :(

Answer 1

Możesz uniemożliwić użytkownikowi cięcie poprzez obsługę zdarzenia "cut" i wywołanie jego metody preventDefault(). Zapobiegnie to obcięciu przy dowolnym wprowadzeniu przez użytkownika (w tym menu kontekstowym przeglądarki lub menu edycji), a nie tylko za pomocą określonego kombinatora klawiszy acji.

Ten przykład używa jQuery ponieważ jsFiddle używa go:

$("#editablediv").on("cut", function(e) { 
    e.preventDefault(); 
}); 

Answer 2

Aby zapobiec Ctrl + X (cut) z div trzeba użyć następujących JQuery.

if (event.ctrlKey && event.keyCode === 88) 
{ 
    return false; 
} 

To zapobiegnie wyciąć tekst z div

Sprawdź Fiddle Here.

Answer 3

zestaw contentEditable false i powinno działać !! tak proste.

użyj atrybutu contenteditable dla div, aby można było edytować lub nie. i użyj readonly attr dla elementów wejściowych formularza.

<element contenteditable="true|false"> 

<input readonly="readonly" /> 

Answer 4

Zastosowanie event.metaKey w przypadku keydown aby sprawdzić, czy klawisz Ctrl (lub Cmd na Macu) klawisze są wciskane. Musisz również wyłączyć zdarzenia cut i paste.