div contentEditable aber Readonly

Ich habe ein div mit text und ich möchte, wenn der cursor hover div um den text auszuwählen. Wenn ich lassen Sie dieses div-Element, wie es ist, wenn man versucht, alles auswählen (STRG+A) dann wähle ich alle Seiten-Inhalte, das heißt alle Körper text.

Loswerden, ich muss zu verwenden contenteditable-Attribut für div.

Aber ich will nicht zu lassen Sie die Menschen um den text zu ändern /kopieren /Ausschneiden und so auf

Ich versuche es mal mit readonly für das div, aber nicht arbeiten.

Irgendwelche Ratschläge bitte ?

PS1: Dieses div hat auch andere tags in html (content), aber ich glaube nicht, dass das ein problem ist.

PS2: Ein Beispiel ist das hier: jsfiddle.net/msakamoto_sf/wfae8hzv/- aber mit einem problem. Sie können schneiden Sie den text 🙁

verwenden contenteditable="false" wird nicht zulassen, schneiden Sie den text.
Ja, und nicht erlaubt, wählen Sie den text aus dem div mit STRG + A. Bitte Lesen Sie meine post.
Ohh ok es ist Problem in chrome. Ich checke es in firefox. In firefox funktioniert das auch.
Ich Teste im firefox auch ( Version 37 ). Hier ist ein test für das, was du sagst: jsfiddle.net/wq9d66t1. Sie können nicht wählen Sie den text innerhalb div mit STRG + A (nur der text im div)
Ich bin mit 37.0.2 und ich kann können Sie hier.jsfiddle.net/wfae8hzv/17
Bitte verstehen Sie die Rolle von STRG + A. Wählen Sie hier jsfiddle.net/wfae8hzv/18 der text innerhalb div mit STRG + A. Sie wird auch markieren Sie den text "text außerhalb div" Hexe außerhalb div. Benutzen Sie einfach STRG + short-keys. Das ist eigentlich mein problem. Ich möchte in der Lage sein, um wählen Sie nur den text innerhalb div mit STRG + A
Ok, so müssen Sie etwas wie: jsfiddle.net/wfae8hzv/20 ?
Ja, ketan. Scheint gut funktioniert. Ich danke Ihnen sehr.
Für was es Wert ist, ich kam gerade über den "contentReadOnly" - Befehl auf developer.mozilla.org/en-US/docs/Web/Guide/HTML/... das scheint genau das, was OP sucht. Ich habe nicht in der Lage, um es arbeiten, obwohl, so vielleicht bin ich falsch, die docs...?

InformationsquelleAutor Simona | 2015-05-16

2

Können Sie verhindern, dass die Benutzer von schneiden durch den Umgang mit dem "cut" - event und ruft seinen preventDefault() Methode. Dadurch wird verhindert, geschnitten, mit user-input (einschließlich der browser-Kontextmenü oder im Menü Bearbeiten), nicht nur über eine bestimmte Tastenkombination.

Diesem Beispiel wird jQuery verwendet, weil dein jsFiddle nutzt es:
```
$("#editablediv").on("cut", function(e) {
    e.preventDefault();
});
```
- nicht aufhören IME bearbeitet.
- Weiter zu imitieren textarea mit einem readonly Attribut, müssten Sie auch preventDefault() auf die paste und keypress Veranstaltungen zusammen mit cut.
InformationsquelleAutor Tim Down
7

Verwenden event.metaKey im keydown Ereignis, um zu überprüfen, ob die Strg-Taste (oder cmd auf mac) Tasten sind gedrückt. Sie müssen auch deaktivieren Sie die cut und paste Veranstaltungen.
```
<div
  contenteditable="true"
  oncut="return false"
  onpaste="return false"
  onkeydown="if(event.metaKey) return true; return false;">
    content goes here
</div>
```
InformationsquelleAutor drdator
0

Um zu verhindern, dass Strg + x (Ausschneiden) von div verwenden müssen Sie folgende JQuery :
```
if (event.ctrlKey && event.keyCode === 88) 
{
   return false;
}
```
Wird es verhindern, dass beim Ausschneiden von text aus div.

Überprüfen Geige Hier.
- Das wird nicht für den Fall, wenn der Benutzer unter Verwendung des "Cut" - option aus dem browser-Kontext-Menü oder im Menü Bearbeiten.
InformationsquelleAutor ketan
0

set contenteditable auf false und dann sollte es klappen !! so einfach.

verwenden contenteditable-Attribut für div, um es zu Bearbeiten oder nicht
und verwenden readonly attr für die form-input-Elemente.
```
<element contenteditable="true|false">

<input readonly="readonly" />
```
InformationsquelleAutor Dinnu Buddy
0

JavaScript,

document.getElementById(divid).contentEditable = "false";

diese arbeiten

InformationsquelleAutor Jinu

Hier ein Beispiel für ein in Reagieren, aber es würde funktionieren mit grundlegenden HTML-und JavaScript als gut, denn ich bin nur die Nutzung der Standard-Ereignisse.

//import CSS
import './DefaultSettings.css';

//import packages
import React, { Component } from 'react';

//import components

const noop = (e) => {
  e.preventDefault();
  return false;
};

class DefaultSettings extends Component {
  render() {
    return (
      <div className="DefaultSettings"
        contentEditable={true}
        onCut={noop}
        onCopy={noop}
        onPaste={noop}
        onKeyDown={noop}>
      </div>
    );
  }
}

export default DefaultSettings;

InformationsquelleAutor Mike Perrenoud

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.