1. Zuhause
  2. Frage und Antwort
  3. Ermitteln eingefügten Text mit Strg + v oder Rechtsklick -> Einfügen

Ermitteln eingefügten Text mit Strg + v oder Rechtsklick -> Einfügen

2010-07-09 9 views
13

Wie erkennt man, welchen Text der Benutzer in Textarea mit JS einfügt?Ermitteln eingefügten Text mit Strg + v oder Rechtsklick -> Einfügen

Quelle

2010-07-09 lam3r4370

+2

möglich Duplikat von [Wie Facebook erkennen, wenn ein Link als PASTED worden] (http://stackoverflow.com/questions/1891145/how-does-facebook-detect-when- a-link-as-be-pasted) –

+0

Nein, zum Beispiel, ich füge "test textarea", ich möchte erkennen, was Text eingefügt wird, in diesem Fall - "test textarea" – lam3r4370

+0

Sie können wahrscheinlich nicht das Cross-Browser ... – galambalazs

Antwort

16

Sie die Paste Ereignis nutzen, um die Paste in den meisten Browsern zu erkennen (insbesondere nicht Firefox 2 obwohl). Notieren Sie die aktuelle Auswahl, wenn Sie das Einfügeereignis behandeln, und legen Sie dann einen kurzen Zeitgeber fest, der eine Funktion aufruft, nachdem der Einfügevorgang abgeschlossen wurde. Diese Funktion kann dann Längen vergleichen und wissen, wo nach dem eingefügten Inhalt gesucht werden soll. Etwas wie das Folgende. Der Kürze halber funktioniert die Funktion, die die Textbereichauswahl erhält, nicht in IE. Sehen Sie hier für etwas, das tut: How to get the start and end points of selection in text area?

function getTextAreaSelection(textarea) { 
    var start = textarea.selectionStart, end = textarea.selectionEnd; 
    return { 
     start: start, 
     end: end, 
     length: end - start, 
     text: textarea.value.slice(start, end) 
    }; 
} 

function detectPaste(textarea, callback) { 
    textarea.onpaste = function() { 
     var sel = getTextAreaSelection(textarea); 
     var initialLength = textarea.value.length; 
     window.setTimeout(function() { 
      var val = textarea.value; 
      var pastedTextLength = val.length - (initialLength - sel.length); 
      var end = sel.start + pastedTextLength; 
      callback({ 
       start: sel.start, 
       end: end, 
       length: pastedTextLength, 
       text: val.slice(sel.start, end) 
      }); 
     }, 1); 
    }; 
} 

var textarea = document.getElementById("your_textarea"); 
detectPaste(textarea, function(pasteInfo) { 
    alert(pasteInfo.text); 
    // pasteInfo also has properties for the start and end character 
    // index and length of the pasted text 
});

Quelle

2010-07-09 11:14:34

+0

Vielen Dank! – lam3r4370

+0

Wird diese Abfrage alle 1 Millisekunde durchgeführt? – chug2k

+0

@ chug2k: Nein, diese Funktion wird nur nach 1 Millisekunde (oder was auch immer der Browser implementiert) nur einmal nach jedem Einfügen ausgeführt. –

1

Nach können Ihnen helfen,

function submitenter(myfield,e) 
    { 
    var keycode; 
    if (window.event) keycode = window.event.keyCode; 
    else if (e) keycode = e.which; 
    else return true; 
    if (keycode == //event code of ctrl-v) 
    { 
     //some code here 
    } 

    } 

    <teaxtarea name="area[name]" onKeyPress=>"return submitenter(this,event);"></textarea>

Quelle

2010-07-09 09:57:04 Salil

+1

Ja, aber was wird an der Stelle von "etwas Code hier" sein, wenn ich herausfinden will, welchen Text der Benutzer einfügt? – lam3r4370

1

Arbeiten auf IE 8 - 10

Erstellen von benutzerdefinierten Code der Befehl Einfügen erfordert mehrere Schritte zu ermöglichen.

  1. Setzen Sie das Ereignisobjekt returnValue im onbeforepaste-Ereignis auf false, um den Kontextmenübefehl Einfügen zu aktivieren.
  2. Brechen Sie das Standardverhalten des Clients ab, indem Sie im onpaste-Ereignishandler das Ereignisobjekt returnValue auf false setzen. Dies gilt nur für Objekte wie das Textfeld, für die ein Standardverhalten definiert ist.
  3. Geben Sie ein Datenformat an, in das die Auswahl über die Methode "getData" des Objekts "clipboardData" eingefügt werden soll.
  4. rufen Sie die Methode im onpaste-Ereignis auf, um benutzerdefinierten Einfügecode auszuführen.

dieses Ereignis aufzurufen, wählen Sie eine der folgenden Möglichkeiten:

  • der rechten Maustaste das Kontextmenü anzuzeigen, und wählen Sie Einfügen aus.
  • Oder drücken Sie STRG + V.

Beispiele

<HEAD> 
<SCRIPT> 
var sNewString = "new content associated with this object"; 
var sSave = ""; 
// Selects the text that is to be cut. 
function fnLoad() { 
    var r = document.body.createTextRange(); 
    r.findText(oSource.innerText); 
    r.select(); 
} 
// Stores the text of the SPAN in a variable that is set 
// to an empty string in the variable declaration above. 
function fnBeforeCut() { 
    sSave = oSource.innerText; 
    event.returnValue = false; 
} 
// Associates the variable sNewString with the text being cut. 
function fnCut() { 
    window.clipboardData.setData("Text", sNewString); 
} 
function fnBeforePaste() { 
    event.returnValue = false; 
} 
// The second parameter set in getData causes sNewString 
// to be pasted into the text input. Passing no second 
// parameter causes the SPAN text to be pasted instead. 
function fnPaste() { 
    event.returnValue = false; 
    oTarget.value = window.clipboardData.getData("Text", sNewString); 
} 
</SCRIPT> 
</HEAD> 
<BODY onload="fnLoad()"> 
<SPAN ID="oSource" 
     onbeforecut="fnBeforeCut()" 
     oncut="fnCut()">Cut this Text</SPAN> 
<INPUT ID="oTarget" TYPE="text" VALUE="Paste the Text Here" 
     onbeforepaste="fnBeforePaste()" 
     onpaste="fnPaste()"> 
</BODY>

Voll doc: http://msdn.microsoft.com/en-us/library/ie/ms536955(v=vs.85).aspx

Quelle

2013-01-31 13:16:20 Calixto

7

HTML5 bietet bereits onpaste nicht nur <input/>, sondern auch editierbare Elemente (<p contenteditable="true" /> , ...

) 
<input type="text" onpaste="myFunction()" value="Paste something in here">

More info here

Quelle

2016-12-02 04:02:43

+2

Vorsicht, dies ist kein Web-Standard. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste. (MDN ist auch viel zuverlässiger als W3Schools für Web APIs) –

Verwandte Themen

 Verwandte Themen