Jak wyłączyć typ wprowadzania = tekst?

Jeśli to możliwe, chcę wyłączyć zapisywanie w polu wejściowym typu textprzy użyciu JavaScript. Pole wejściowe jest wypełniane z bazy danych; dlatego nie chcę, aby użytkownik modyfikował jego wartość.

Jeśli wiesz o tym podczas renderowania strony, co brzmi tak, jak robisz, ponieważ baza danych ma wartość, lepiej wyłączyć ją podczas renderowania zamiast JavaScript. Aby to zrobić, po prostu dodaj readonlyatrybut (lub disabled, jeśli chcesz usunąć go również z przesyłania formularza) do <input>, na przykład:

<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />

document.getElementById('foo').disabled = true;

lub

document.getElementById('foo').readOnly = true;

Zauważ, że readOnlypowinno być w camelCase, aby działało poprawnie w Firefoksie (magia).

Demo: https://jsfiddle.net/L96svw3c/ - w pewnym stopniu wyjaśnia różnicę między disabledi readOnly.

Jeśli dane są wypełniane z bazy danych, można rozważyć nie przy użyciu <input>znacznika, aby go wyświetlić. Niemniej jednak możesz go wyłączyć bezpośrednio w tagu:

<input type='text' value='${magic.database.value}' disabled>

Jeśli chcesz później wyłączyć tę funkcję za pomocą JavaScript, możesz ustawić atrybut „wyłączony”:

document.getElementById('theInput').disabled = true;

Powodem, dla którego nie sugeruję pokazywania wartości jako an, <input>jest to, że z mojego doświadczenia wynika, że ​​powoduje to problemy z układem. Jeśli tekst jest długi, <input>użytkownik będzie musiał spróbować przewinąć tekst, co nie jest czymś, co normalni ludzie by się domyślili. Jeśli po prostu wrzucisz go do <span>czegoś, masz większą elastyczność stylizacji.

Możesz także przez jQuery:

$('#foo')[0].disabled = true;

Przykład pracy:

$('#foo')[0].disabled = true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />

Uzyskaj odwołanie do swojego pola wprowadzania, jak chcesz (np. document.getElementById('mytextbox')) I ustaw jego readonlywłaściwość na true:

myInputBox.readonly = true;

Alternatywnie możesz po prostu dodać tę właściwość bezpośrednio (bez JavaScript):

<input type="text" value="from db" readonly="readonly" />