webentwicklung-frage-antwort-db.com.de

Wie kann man verhindern, dass ein Benutzer in ein Textfeld eingibt, ohne das Feld zu deaktivieren?

Ich habe es versucht:

$('input').keyup(function() {

   $(this).attr('val', '');

});

der eingegebene Text wird jedoch etwas entfernt, nachdem ein Buchstabe eingegeben wurde. Gibt es trotzdem, um zu verhindern, dass der Benutzer Text vollständig eingeben kann, ohne das Textfeld zu deaktivieren?

59
Jacob

Eine Alternative ohne Javascript, die leicht übersehen werden kann: Können Sie das Attribut readonly anstelle des Attributs disabled verwenden? Es verhindert, dass der Text in der Eingabe bearbeitet wird, aber der Browser formatiert die Eingabe anders (es ist unwahrscheinlich, dass er "ausgegraut" wird) <input readonly type="text" ...>

133
Mike Mertsock

wenn Sie nicht möchten, dass das Feld "deaktiviert" oder "smth" aussieht, verwenden Sie einfach Folgendes:

onkeydown="return false;"

im Grunde ist es das Gleiche, was Greengit und Derek gesagt haben, aber etwas kürzer

55
Art
$('input').keydown(function(e) {
   e.preventDefault();
   return false;
});
29
treecoder
$('input').keypress(function(e) {
    e.preventDefault();
});
15
Derek Hunziker

Wenn Sie verhindern möchten, dass der Benutzer etwas hinzufügt, bieten Sie ihm jedoch die Möglichkeit, Zeichen zu löschen:

<input value="CAN'T ADD TO THIS" maxlength="0" />

Wenn Sie das Attribut maxlength einer Eingabe auf "0" setzen, kann der Benutzer zwar keinen Inhalt hinzufügen , den Inhalt jedoch nach Belieben löschen .


Aber wenn Sie möchten, dass es wirklich konstant und unveränderlich ist:

<input value="THIS IS READONLY" onkeydown="return false" />

Wenn Sie das Attribut onkeydown auf return false setzen, wird der Benutzer von der Eingabe ignoriert keypresses darauf , wodurch verhindert wird, dass sie den Wert ändern oder beeinflussen.

2

verwenden Sie einfach onkeydown = "return false" für das Steuerelement-Tag (siehe unten). Es akzeptiert keine Werte vom Benutzer.

    <asp:TextBox ID="txtDate" runat="server" AutoPostBack="True"
ontextchanged="txtDate_TextChanged" onkeydown="return false" >
    </asp:TextBox>
1
anand360

Markup

<asp:TextBox ID="txtDateOfBirth" runat="server" onkeydown="javascript:preventInput(event);" onpaste="return false;"
                                TabIndex="1">

Skript

function preventInput(evnt) {
//Checked In IE9,Chrome,FireFox
if (evnt.which != 9) evnt.preventDefault();}
1
Biju kalanjoor

Eine andere Methode, die je nach Bedarf verwendet werden kann $('input').onfocus(function(){this.blur()}); Ich denke, das ist, wie Sie es schreiben würden. Ich beherrsche kein Jquery.

0
qw3n

Ich füge gerne eine hinzu, die auch mit dynamischer Javascript-DOM-Erstellung wie D3 funktioniert, wo es unmöglich ist, Folgendes hinzuzufügen:

//.attr(function(){if(condition){"readonly"]else{""}) //INCORRECT CODE !

um zu verhindern, dass Aktionen für ein HTML-Eingabe-DOM-Element der Klasse readonly hinzugefügt werden:

var d = document.getElementById("div1");
d.className += " readonly";

ODER in D3:

 .classed("readonly", function(){
   if(condition){return true}else{return false}
 })

UND zu CSS oder weniger hinzufügen:

.readonly {
  pointer-events: none;
}

das Schöne an dieser Lösung ist, dass Sie sie dynamisch ein- und ausschalten können, um sie zum Beispiel in D3 zum Zeitpunkt der Erstellung zu integrieren (nicht möglich mit dem einzigen Attribut "readonly").

um das Element aus der Klasse zu entfernen:

document.getElementById("MyID").className =
  document.getElementById("MyID").className.replace(/\breadonly\b/,'');

oder benutze Jquery:

$( "div" ).removeClass( "readonly" )

oder die Klasse umschalten:

$( "div" ).toggleClass( "readonly", addOrRemove );

Nur um vollständig zu sein, viel Glück = ^)

0
irJvV

Eine Option besteht darin, einen Handler an das Ereignis input zu binden.

Der Vorteil dieses Ansatzes besteht darin, dass wir Tastaturverhalten, das der Benutzer erwartet, nicht verhindern (z. B. Tabulator, Bild auf/ab usw.).

Ein weiterer Vorteil ist, dass auch der Fall behandelt wird, wenn der Eingabewert durch Einfügen von Text über das Kontextmenü geändert wird.

Dieser Ansatz funktioniert am besten, wenn Sie nur darauf achten, dass die Eingabe leer bleibt. Wenn Sie einen bestimmten Wert beibehalten möchten, müssen Sie diesen Wert an einem anderen Ort (in einem Datenattribut?) Nachverfolgen, da er nicht verfügbar ist, wenn das Ereignis input empfangen wird.

const inputEl = document.querySelector('input');

inputEl.addEventListener('input', (event) => {
  event.target.value = '';
});
<input type="text" />

Getestet in Safari 10, Firefox 49, Chrome 54, IE 11.

0
JKS

wenn der Text vor dem Keyup erscheint, wird er wahrscheinlich im Keydown-Ereignis ausgelöst. Hast du das schon probiert?

0
Anh Pham