Odpowiedzi:
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 readonly
atrybut (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 readOnly
powinno 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 disabled
i readOnly
.
readonly
(małe litery) nadal nie działa w Firefoksie 52 na Ubuntu - powinno być wielbłądem.
input
element za pomocą id="gate"
i wypróbowuję twój kod, który wydaje się nie działać dla mnie ...
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 readonly
wł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" />