2013-07-14 4 views
4

Я хочу изменить невидимый вход html на видимый, когда я нажимаю кнопку, как показано ниже. Моя HTML строка, создать скрытый вход является:Сделать видимым скрытый вход html

<input type="hidden" id="txtHiddenUname" value="invalid input" /> 

мой Java-скрипт для изменения видимости является

var y = document.getElementById("txtHiddenUname"); 
y.style.display= "inline"; 

Но это не может сделать скрытый элемент, чтобы быть видимым. Есть идеи?

+0

Вы должны изменить значение на «действительный ввод», в противном случае он по-прежнему недействителен? – adeneo

ответ

6

Вы должны изменить тип входного элемента, как: Java Script

y.setAttribute('type','text'); 
//or 
y.type = 'text'; 

1) Либо пользователя внутри тега тела, как показано ниже:

<input type="hidden" id="txtHiddenUname" value="invalid input" /> 

<script type="text/javascript"> 
var y = document.getElementById("txtHiddenUname"); 
y.type= "text"; 
</script> 

ИЛИ

2) Используйте некоторый обработчик событий, такой как onload

<head> 
<script type="text/javascript"> 
function on_load(){ 
    var y = document.getElementById("txtHiddenUname"); 
    y.type= "text"; 
} 
    </script> 
</head> 

<body onload = "on_load()"> 

<input type="hidden" id="txtHiddenUname" value="invalid input" /> 

... 

, так что DOM готов.

+0

Я попробовал, и действительно, это делает текст видимым. но видимость остается в миллисекундах, и она возвращается в невидимый режим. – kona

+0

используйте этот код после того, как некоторые события произойдут на каком-то элементе, например, на кнопке или другом. – Lekhnath

2

Здесь не имеет значения в CSS это дело атрибутов, поэтому вы должны изменить атрибут type от hidden к чему-то другому, как text

Просьба проверить это [как-к-изменения в HTML-объект-элемент- data-attribute-value-in-javascript] [1]

проверить это: How to change HTML Object element data attribute value in javascript. Чтобы изменить значение атрибута с помощью jQuery или Javascript

0
<input type = "hidden", id = "abbriv", value = "Some Random Text"/> 

<script> 
     function f1() 
     { 
      var x = document.getElementById("abbriv").value; 
      document.getElementById("demo").innerHTML = x; 
     } 
    </script> 
+0

Просьба дать некоторое объяснение относительно вашего ответа относительно того, что именно происходит, чтобы, когда кто-то читал это, у них есть четкое/лучшее понимание. – Rikh

Смежные вопросы