Jak wyłączyć typ wprowadzania = tekst?

123

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ść.

javascript html

— kawtousse
źródło

172

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" />

— Nick Craver
źródło

81

Nie wiem, dlaczego to dostaje głosy, nie odpowiada na pytanie. Spodziewaliśmy się odpowiedzi javascript.

— Sophie

3

@Sophie to najbardziej poprawny sposób, w jaki pytający może to zrobić w zależności od sytuacji, być może konieczna jest zmiana tytułu.

— Nick Craver

6

tryb wyłączony zapobiega zdarzeniom kliknięcia w polu wprowadzania, tylko do odczytu nie. fyi.

— knutole

Aby pole wejściowe „tylko do odczytu” wyglądało jak pole „wyłączone”, ustaw „style =” kolor: szary; kolor tła: # F0F0F0; „”. (to był komentarz do tej odpowiedzi )

— Jake Toronto

2

Pamiętaj, że przeglądarki mogą ignorować atrybut „wyłączony” lub „tylko do odczytu” i nie należy polegać na tej metodzie, aby niezawodnie chronić dane przed aktualizacją ... jeśli kod po stronie serwera przetwarzający formularz będzie nadal akceptował wartość z tego pola i zaktualizować ją, każdy, kto ma wystarczającą wiedzę, aby utworzyć własny formularz, może ominąć to „wyłączenie”… jest to dla wygody interfejsu użytkownika tylko w zaufanym środowisku. Prawdziwym sposobem, aby temu zapobiec, jest logika po stronie serwera.

— Aaron Wallentine,

206

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.

— hudolejev
źródło

3

To zadziałało dla mnie. Wersja Jquery to $ ('input'). Prop ('disabled', true)

— Daniel Sun Yang

Spóźniłem się z tym siedem lat - ale czy jest jakaś semantyczna różnica między nimi w 2017 roku?

— Jules

2

Wcale się nie spóźniłeś, magia wciąż tam jest (: Nie pamiętam, na jakich platformach testowałem wtedy, ale dziś readonly(małe litery) nadal nie działa w Firefoksie 52 na Ubuntu - powinno być wielbłądem.

— hudolejev

Dlaczego to nie działa dla mnie? Zrobiłem inputelement za pomocą id="gate"i wypróbowuję twój kod, który wydaje się nie działać dla mnie ...

— Gniew Voldemorta

21

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.

— Spiczasty
źródło

3

Pamiętaj, że wyłączenie może sprawić, że tekst będzie prawie nieczytelny w niektórych przeglądarkach. Lepiej by było, gdybyś miał atrybut tylko do odczytu, np. <Input type = "text" value = "foo" readonly>

— Olly Hodgson

7

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" />

Rozwiń fragment

— Chani Poz
źródło

1

@Chani Poz Wywołujesz natywny setter js na obiekcie jquery, co spowoduje błąd. $ ('# foo') [0] .disabled = true lub $ ('# foo'). get (0) .disabled = true wykona pracę

— Arek Kostrzeba

6

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" />

— Roatin Marth
źródło

Jeśli piszesz HTML (w przeciwieństwie do XHTML), będzie to <input type = "text" value = "from db" readonly>

— Olly Hodgson