Изменить тип ввода = «текст» с типом ввода = «пароль» OnFocus()

До сих пор я достиг 1-й части, я успешно изменить тип входного сигнала от текста к паролю с этим JavaScript:Изменить тип ввода = «текст» с типом ввода = «пароль» OnFocus()

function replaceT(obj) { 
     var newO = document.createElement('input'); 
     newO.setAttribute('type', 'password'); 
     newO.setAttribute('class', 'textbox'); 
     newO.setAttribute('name', obj.getAttribute('name')); 
     obj.parentNode.replaceChild(newO, obj); 
     newO.focus(); 
    }

и код ASP:

<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="replaceT(this)"></asp:TextBox>

Что я хочу, это вторая часть. Как вернуть «Пароль ...» значение onblur.

Короче говоря, я хочу реализовать текстовое поле с паролем в виде Facebook. A placeholder атрибут, который функционирует на IE.

Вот как она идет перед focus():

enter image description here

затем после фокуса:

enter image description here

затем вернитесь к этому onblur():

Спасибо.

P.S.

Я хочу реализовать это без jQuery (чистый javascript), и я работаю с IE 7+.

источник

2013-07-01 Christian Mark

Ваш вопрос очень неоднозначный. Пожалуйста, дайте чистое название и подробное объяснение того, что вы хотите. – mohkhan

Проверьте мой править сэр. –

Большое спасибо! – mohkhan

Вам не нужно, чтобы заменить компонент, просто установите type в this к password как код ниже:

<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..." TabIndex="2" onfocus="this.type='password'">

Вот является jsfiddle рабочий пример: http://jsfiddle.net/mZyTG/

Update

Я не тестировал этот код, но он добавил один onblur прослушиватель событий в newO, а когда invo он заменил входной файл на старый.

function replaceT(obj) { 
     var newO = document.createElement('input'); 
     newO.setAttribute('type', 'password'); 
     newO.setAttribute('class', 'textbox'); 
     newO.setAttribute('name', obj.getAttribute('name')); 
     newO.addEventListener("onblur", function(){newO.parentNode.replaceChild(obj, newO)}, false); 
     obj.parentNode.replaceChild(newO, obj); 
     newO.focus(); 
    }

источник

2013-07-01 06:25:22 fmodos

У меня действительно был первый вопрос. Я достигаю этого путем замены элемента. Поскольку я также работаю над IE, то, что вы сделали, несовместимо с IE. –

получил это сейчас, ваш вопрос был неясным ... проблема в замене заключается в том, что я думаю, что он потеряет «интеграцию» с компонентом, сгенерированным asp – fmodos

. Я предлагаю вам другое решение ... сгенерируйте 2 TextBox используя asp, один будет текстовым tupe и другим типом пароля ... поэтому, когда вы нажмете текстовый тип, вы спрячете его и покажете пароль типа один – fmodos

Попробуйте этот небольшой плагин

<script> 
    $(".contentplaceholder").placeholderContent(); 
</script>

Проверьте скрипку

http://jsfiddle.net/Shinov/VdtBs/

Проверьте новую скрипку для чистого яваскрипта место держатель

http://jsfiddle.net/Shinov/VdtBs/2/

источник

2013-07-01 06:30:02

Это работает с jQuery? –

yes ... jquery необходим .. –

* Я хочу реализовать это без jQuery (чистый javascript), и я работаю с IE 7 +. * :) –

<asp:TextBox ID="txtPassword" runat="server" SkinID="txtLogin" value="Password..."placeholder="Enter your password" >

просто поместить этот код в осины разделе нет необходимости Javascript надеюсь, что это помогает

редактировать 2: надеюсь, что это помогает, проверено с т 10

<html> 
<script> 
function a() 
{ 
document.getElementById("p1").value=""; 
document.getElementById("p1").type="password"; 

} 

function b() 
{ 
if(document.getElementById("p1").value=="") 
{ 
document.getElementById("p1").type="text"; 
document.getElementById("p1").value="Password"; 
} 
else 
{ 
document.getElementById("p1").type="password"; 

} 


} 
</script> 
<body> 
Password:<input type="text" value="Password" onclick="a();" id="p1"   

onblur="b();"> 
<body> 
</html>

источник

2013-07-01 06:41:25 Ritz

'ie7' обыкновением поддержки заполнитель – coolguy

@Christian делать проверить редактирование- – Ritz

Привет @Ritesh, я попробовал ваше решение, и он работал на IE 9 и 10. Однако мне нужно, чтобы он работал над IE 7 и 8. Спасибо за ваши усилия. –

Начну с советом отделить ваш javascript и css от разметки. Он считался старой школой и сейчас плохой практикой. Есть некоторые известные проблемы с setAttribute и getAttribute в IE, и поскольку это, вероятно, важно для вас, я попытаюсь использовать что-то еще. Попробуйте Google: issues with setAttribute and getAttribute in ie

Я сделал что-то в jsfiddle, надеюсь, это сработает для вас, если нет - сообщите мне. Фрагмент кода: simple example.

HTML

<input class='placeholder' value="Type here..."/>

CSS

.placeholder { 
    color: #aaa; 
} 
.text { 
    color: #000; 
}

var input = document.getElementsByTagName('input')[0]; 

if(input.addEventListener) { 
    input.addEventListener('blur', function(){ 
     this.type = 'text' 
     this.value = 'Type here...'; 
     this.className = 'placeholder'; 
    }, false); 
    input.addEventListener('focus', function(){ 
     this.type = 'password' 
     this.value = ''; 
     this.className = 'text'; 
    }, false); 
} else if(input.attachEvent) { 
    input.attachEvent('onblur', function(){ 
     this.type = 'text' 
     this.value = 'Type here...'; 
     this.className = 'placeholder'; 
    }); 
    input.attachEvent('onfocus', function(){ 
     this.type = 'password' 
     this.value = ''; 
     this.className = 'text'; 
    }); 
}

Доступ элементов по идентификатору бы сделать его более конкретный и быстрый, но доступ к элементам по имени тега позволит вам применять один и тот же код для всех входных элементов с помощью цикла.

Он должен работать, хотя я использую linux и не успеваю его протестировать, т.е.

Мой пример применяется только к вашей конкретной задаче, я бы рекомендовал вам сделать из нее функцию, чтобы сделать ее применимой к более широкой области задач.

EDIT: Для более новых браузеров я бы разместился с placeholder attribute. Вот browser support

источник

2013-07-04 11:23:33 orustammanapov

Можете ли вы обновить свой ответ и сделать его совместимым с этим полем: ' ' –

@ChristianMark каждый серверный язык будет переведен на простой html, прежде чем он получит клиента. Поскольку JS работает в браузере, он делает код выше действительным даже в вашем примере. Я также обнаружил, что ASP TextBox будет отображаться как '', поэтому я не вижу причин, по которым вы не могли использовать мой код. Также может вас заинтересовать: [как изменить отображаемый элемент или, по крайней мере, его тип] (http://stackoverflow.com/questions/9398356/render-asp-net-textbox-as-html5-input-type- номер) – orustammanapov

Изменить тип ввода = «текст» с типом ввода = «пароль» OnFocus()

ответ

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