Wie kann ich den Text mit jquery vollständig editierbar machen

Question

Aktuell: Der Text im Textfeld ist derzeit nicht editierbar, die Rücktaste löscht keine Zeichen und Rechtsklick auf Ausschneiden-Kopieren-Einfügen wurde deaktiviert. Sobald ich jedoch einen Text zu diesem vorhandenen nicht editierbaren Text hinzufüge, kann ich mit den Pfeiltasten zu den Zeichen navigieren und einige davon löschen.

Ziel: Ich möchte den nicht bearbeitbaren Text so fixiert, dass ich nicht mit Backspace, löschen, cut-copy-einfügen mit Rechtsklick und vor allem, Pfeiltasten zum Löschen bewegen können. Ich möchte, dass dies mit JQuery gemacht wird.

Der Code ist wie folgt:

xhtml:

$(document).ready(function() { 
    $('#contenttitle').html($('.hiddenbred').html()); 
    $('.newsflash').css('display','none'); 
    disableHalfText(); 
} 

jsscript: 'service' $ (document) .ready (function() {
$(). an ("Kontextmenu", Funktion (e) { Rückgabe false; }); });

function disableHalfText(){ 

var readOnlyLength = $('.servicename').val().length; 

$('.servicename').on('keydown', function(event) { 
    var $field = $(this); 
    if ((event.which != 37 && (event.which != 39)) 
      && ((this.selectionStart < readOnlyLength) 
        || ((this.selectionStart == readOnlyLength) && (event.which == 8)))) { 
     return false; 
     } 
    }); 
} 

Die Ausgabe sieht etwa so aus:
Service-Name: TextNotEditable_addUserTextHere

Mein Fokus liegt darauf, wie ich jede Löschung deaktivieren kann nach dem Navigieren mit den Pfeiltasten. Danke im Voraus.

Answer 1

Sie können Ihrem Element <input> die Eigenschaft "deaktiviert" geben und die CSS-Eigenschaft user-select verwenden (mit Präfixen für Kompatibilität). JQuery kann diese Dinge umschalten, um das gewünschte Ergebnis zu erzielen, z.B. wenn Klicken auf eine Schaltfläche auf das Eingabefeld zu wechseln, wie in:

Javascript:

$(document).on('click tap', '#toggle-button', function() { 
    var current = $(".input-toggle").prop("disabled"); // Get current state: disabled = true? 

    $(".input-toggle") 
     .prop("disabled", !current) // set to the opposite of the current state 
     .toggleClass('no-select'); // don't let the user select! 

}); 

CSS:

no-select { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

Example fiddle here - genießen!