javascript - change - cambiar el tipo de campo de entrada con jQuery
jquery change input value (28)
¿Has intentado usar .prop ()?
$("#password").prop(''type'',''text'');
$(document).ready(function() {
// #login-box password field
$(''#password'').attr(''type'', ''text'');
$(''#password'').val(''Password'');
});
Se supone que esto debe cambiar el campo de entrada #password id="password" (con id="password" ) que es de type password en un campo de texto normal, y luego completar el texto "Contraseña".
Sin embargo, no funciona. ¿Por qué?
Aquí está la forma:
<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
<ol>
<li>
<div class="element">
<input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
</div>
</li>
<li>
<div class="element">
<input type="password" name="password" id="password" value="" class="input-text" />
</div>
</li>
<li class="button">
<div class="button">
<input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
</div>
</li>
</ol>
</form>
Aún más fácil ... no hay necesidad de toda la creación de elementos dinámicos. Simplemente cree dos campos separados, haciendo que uno sea el campo de contraseña ''real'' (escriba = "contraseña") y el otro como un campo de contraseña ''falso'' (escriba = "texto"), configurando el texto en el campo falso a un color gris claro y configurando el valor inicial a ''Contraseña''. Luego agregue algunas líneas de Javascript con jQuery como se muestra a continuación:
<script type="text/javascript">
function pwdFocus() {
$(''#fakepassword'').hide();
$(''#password'').show();
$(''#password'').focus();
}
function pwdBlur() {
if ($(''#password'').attr(''value'') == '''') {
$(''#password'').hide();
$(''#fakepassword'').show();
}
}
</script>
<input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="Password" onfocus="pwdFocus()" />
<input style="display: none" type="password" name="password" id="password" value="" onblur="pwdBlur()" />
Entonces, cuando el usuario ingrese el campo de contraseña ''falso'' se ocultará, se mostrará el campo real y el enfoque se moverá al campo real. Nunca podrán ingresar texto en el campo falso.
Cuando el usuario deja el campo de contraseña real, el script verá si está vacío, y si es así, ocultará el campo real y mostrará el falso.
Tenga cuidado de no dejar un espacio entre los dos elementos de entrada, ya que IE se colocará uno poco después del otro (representando el espacio) y el campo aparecerá para moverse cuando el usuario ingrese o salga de él.
Aquí hay un método que utiliza una imagen al lado del campo de contraseña para alternar entre ver la contraseña (entrada de texto) y no verla (entrada de contraseña). Utilizo una imagen de "ojo abierto" y "ojo cerrado", pero puedes usar lo que más te convenga. La forma en que funciona es tener dos entradas / imágenes y al hacer clic en la imagen, el valor se copia de la entrada visible a la oculta, y luego se intercambia su visibilidad. A diferencia de muchas de las otras respuestas que usan nombres codificados, esta es lo suficientemente general como para usarla varias veces en una página. También se degrada con gracia si JavaScript no está disponible.
Aquí es cómo se ven dos de estos en una página. En este ejemplo, la Contraseña-A ha sido revelada haciendo clic en su ojo.
$(document).ready(function() {
$(''img.eye'').show();
$(''span.pnt'').on(''click'', ''img'', function() {
var self = $(this);
var myinp = self.prev();
var myspan = self.parent();
var mypnt = myspan.parent();
var otspan = mypnt.children().not(myspan);
var otinp = otspan.children().first();
otinp.val(myinp.val());
myspan.hide();
otspan.show();
});
});
img.eye {
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<b>Password-A:</b>
<span class="pnt">
<span>
<input type="password" name="passa">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>
<form>
<b>Password-B:</b>
<span class="pnt">
<span>
<input type="password" name="passb">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>
Aquí hay un pequeño fragmento de código que le permite cambiar el type de elementos en los documentos.
jquery.type.js ( GitHub Gist ):
var rtype = /^(?:button|input)$/i;
jQuery.attrHooks.type.set = function(elem, value) {
// We can''t allow the type property to be changed (since it causes problems in IE)
if (rtype.test(elem.nodeName) && elem.parentNode) {
// jQuery.error( "type property can''t be changed" );
// JB: Or ... can it!?
var $el = $(elem);
var insertionFn = ''after'';
var $insertionPoint = $el.prev();
if (!$insertionPoint.length) {
insertionFn = ''prepend'';
$insertionPoint = $el.parent();
}
$el.detach().attr(''type'', value);
$insertionPoint[insertionFn]($el);
return value;
} else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
// Setting the type on a radio button after the value resets the value in IE6-9
// Reset value to it''s default in case type is set after value
// This is for element creation
var val = elem.value;
elem.setAttribute("type", value);
if (val) {
elem.value = val;
}
return value;
}
}
Resuelve el problema eliminando la input del documento, cambiando el type y luego devolviéndolo al lugar original.
Tenga en cuenta que este fragmento de código solo se probó para los navegadores WebKit. ¡No hay garantías de nada más!
Es muy probable que esta acción se prevenga como parte del modelo de seguridad del navegador.
Edición: de hecho, al probar ahora mismo en Safari, recibo la type property cannot be changed error que type property cannot be changed .
Edición 2: eso parece ser un error directamente de jQuery. Usar el siguiente código directo de DOM funciona bien:
var pass = document.createElement(''input'');
pass.type = ''password'';
document.body.appendChild(pass);
pass.type = ''text'';
pass.value = ''Password'';
Edición 3: directamente desde la fuente de jQuery, esto parece estar relacionado con IE (y podría ser un error o parte de su modelo de seguridad, pero jQuery no es específico):
// We can''t allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
throw "type property can''t be changed";
Esto funcionó para mí.
$(''#newpassword_field'').attr("type", ''text'');
Esto funciona para mi
$(''#password'').replaceWith($(''#password'').clone().attr(''type'', ''text''));
Esto hará el truco. Aunque podría mejorarse para ignorar atributos que ahora son irrelevantes.
Enchufar:
(function($){
$.fn.changeType = function(type) {
return this.each(function(i, elm) {
var newElm = $("<input type=/""+type+"/" />");
for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) {
var attribute = elm.attributes[iAttr].name;
if(attribute === "type") {
continue;
}
newElm.attr(attribute, elm.attributes[iAttr].value);
}
$(elm).replaceWith(newElm);
});
};
})(jQuery);
Uso:
$(":submit").changeType("checkbox");
Violín:
Funciona mucho más fácil con eso:
document.querySelector(''input[type=password]'').setAttribute(''type'', ''text'');
y para volver a convertirlo en el campo de contraseña, ( asumiendo que el campo de contraseña es la segunda etiqueta de entrada con tipo de texto ):
document.querySelectorAll(''input[type=text]'')[1].setAttribute(''type'', ''password'')
He creado una extensión jQuery para alternar entre texto y contraseña. Funciona en IE8 (probablemente 6 y 7 también, pero no probado) y no perderá su valor o atributos:
$.fn.togglePassword = function (showPass) {
return this.each(function () {
var $this = $(this);
if ($this.attr(''type'') == ''text'' || $this.attr(''type'') == ''password'') {
var clone = null;
if((showPass == null && ($this.attr(''type'') == ''text'')) || (showPass != null && !showPass)) {
clone = $(''<input type="password" />'');
}else if((showPass == null && ($this.attr(''type'') == ''password'')) || (showPass != null && showPass)){
clone = $(''<input type="text" />'');
}
$.each($this.prop("attributes"), function() {
if(this.name != ''type'') {
clone.attr(this.name, this.value);
}
});
clone.val($this.val());
$this.replaceWith(clone);
}
});
};
Funciona de maravilla. Simplemente puede llamar a $(''#element'').togglePassword(); para cambiar entre los dos o dar una opción para "forzar" la acción basándose en otra cosa (como una casilla de verificación): $(''#element'').togglePassword($checkbox.prop(''checked''));
Heres una solución DOM
myInput=document.getElementById("myinput");
oldHtml=myInput.outerHTML;
text=myInput.value;
newHtml=oldHtml.replace("password","text");
myInput.outerHTML=newHtml;
myInput=document.getElementById("myinput");
myInput.value=text;
Hoy en día, solo puedes usar
$("#password").prop("type", "text");
Pero por supuesto, deberías hacer esto
<input type="password" placeholder="Password" />
en todos menos en IE. Hay marcadores de posición por ahí para imitar esa funcionalidad en IE también.
Las propiedades de tipo no se pueden cambiar, debe reemplazar o superponer la entrada con una entrada de texto y enviar el valor a la entrada de contraseña en el envío.
Me gusta de esta manera, para cambiar el tipo de un elemento de entrada: old_input.clone () .... Aquí hay un ejemplo. Hay una casilla de verificación "id_select_multiple". Si se cambia a "seleccionado", los elementos de entrada con el nombre "foo" se deben cambiar a casillas de verificación. Si no se selecciona, deberían volver a ser botones de radio.
$(function() {
$("#id_select_multiple").change(function() {
var new_type='''';
if ($(this).is(":checked")){ // .val() is always "on"
new_type=''checkbox'';
} else {
new_type="radio";
}
$(''input[name="foo"]'').each(function(index){
var new_input = $(this).clone();
new_input.attr("type", new_type);
new_input.insertBefore($(this));
$(this).remove();
});
}
)});
No he probado en IE (ya que lo necesitaba para un sitio de iPad), un formulario que no pude cambiar el HTML pero que podía agregar JS:
document.getElementById(''phonenumber'').type = ''tel'';
(La vieja escuela JS es fea al lado de todos los jQuery!)
Sin embargo, http://bugs.jquery.com/ticket/1957 enlaza con MSDN: "A partir de Microsoft Internet Explorer 5, la propiedad de tipo es de lectura / escritura una vez, pero solo cuando se crea un elemento de entrada con el método createElement y antes de que se agregue al documento ". ¿Tal vez podría duplicar el elemento, cambiar el tipo, agregar a DOM y eliminar el anterior?
Prueba esto
La demo esta aqui
$(document).delegate(''input[type="text"]'',''click'', function() {
$(this).replaceWith(''<input type="password" value="''+this.value+''" id="''+this.id+''">'');
});
$(document).delegate(''input[type="password"]'',''click'', function() {
$(this).replaceWith(''<input type="text" value="''+this.value+''" id="''+this.id+''">'');
});
Recibí el mismo mensaje de error al intentar hacer esto en Firefox 5.
Lo resolví usando el siguiente código:
<script type="text/javascript" language="JavaScript">
$(document).ready(function()
{
var passfield = document.getElementById(''password_field_id'');
passfield.type = ''text'';
});
function focusCheckDefaultValue(field, type, defaultValue)
{
if (field.value == defaultValue)
{
field.value = '''';
}
if (type == ''pass'')
{
field.type = ''password'';
}
}
function blurCheckDefaultValue(field, type, defaultValue)
{
if (field.value == '''')
{
field.value = defaultValue;
}
if (type == ''pass'' && field.value == defaultValue)
{
field.type = ''text'';
}
else if (type == ''pass'' && field.value != defaultValue)
{
field.type = ''password'';
}
}
</script>
Y para usarlo, simplemente configure los atributos onFocus y onBlur de sus campos a algo como lo siguiente:
<input type="text" value="Username" name="username" id="username"
onFocus="javascript:focusCheckDefaultValue(this, '''', ''Username -OR- Email Address'');"
onBlur="javascript:blurCheckDefaultValue(this, '''', ''Username -OR- Email Address'');">
<input type="password" value="Password" name="pass" id="pass"
onFocus="javascript:focusCheckDefaultValue(this, ''pass'', ''Password'');"
onBlur="javascript:blurCheckDefaultValue(this, ''pass'', ''Password'');">
También lo uso para un campo de nombre de usuario, así que cambia un valor predeterminado. Simplemente configure el segundo parámetro de la función en "" cuando lo llame.
También podría valer la pena tener en cuenta que el tipo predeterminado de mi campo de contraseña es en realidad contraseña, en caso de que un usuario no tenga habilitado javascript o si algo sale mal, de esa manera su contraseña aún estará protegida.
La función $ (documento) .ready es jQuery y se carga cuando el documento ha terminado de cargarse. Esto cambia el campo de contraseña a un campo de texto. Obviamente, tendrás que cambiar ''password_field_id'' a la ID de tu campo de contraseña.
Siéntase libre de usar y modificar el código!
Espero que esto ayude a todos los que tuvieron el mismo problema que yo :)
- CJ Kent
EDITAR: Buena solución pero no absoluta. Funciona en FF8 e IE8 PERO no completamente en Chrome (16.0.912.75 ver). Chrome no muestra el texto de la contraseña cuando se carga la página. Además, FF mostrará su contraseña cuando el autocompletar esté activado.
Simplemente esto:
this.type = ''password'';
como
$("#password").click(function(){
this.type = ''password'';
});
Esto se supone que su campo de entrada se configuró en "texto" antes de la mano.
Solo crea un nuevo campo para evitar esta cosa de seguridad:
var $oldPassword = $("#password");
var $newPassword = $("<input type=''text'' />")
.val($oldPassword.val())
.appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr(''id'',''password'');
Solo otra opción para todos los amantes de IE8, y funciona perfectamente en los navegadores más nuevos. Puede simplemente colorear el texto para que coincida con el fondo de la entrada. Si tiene un solo campo, esto cambiará el color a negro al hacer clic / enfocar en el campo. No lo usaría en un sitio público, ya que "confundiría" a la mayoría de las personas, pero lo estoy usando en una sección de ADMINISTRADOR donde solo una persona tiene acceso a las contraseñas de los usuarios.
$(''#MyPass'').click(function() {
$(this).css(''color'', ''#000000'');
});
-O-
$(''#MyPass'').focus(function() {
$(this).css(''color'', ''#000000'');
});
Esto, también necesario, cambiará el texto a blanco cuando salga del campo. Simple, simple, simple.
$("#MyPass").blur(function() {
$(this).css(''color'', ''#ffffff'');
});
[Otra opción] Ahora, si tiene varios campos que está verificando, todos con la misma ID, como los estoy utilizando, agregue una clase de ''pase'' a los campos en los que desea ocultar el texto. los campos de contraseña escriben a ''texto''. De esta manera, solo se cambiarán los campos con una clase de ''pase''.
<input type="text" class="pass" id="inp_2" value="snoogle"/>
$(''[id^=inp_]'').click(function() {
if ($(this).hasClass("pass")) {
$(this).css(''color'', ''#000000'');
}
// rest of code
});
Aquí está la segunda parte de esto. Esto cambia el texto de nuevo a blanco después de salir del campo.
$("[id^=inp_]").blur(function() {
if ($(this).hasClass("pass")) {
$(this).css(''color'', ''#ffffff'');
}
// rest of code
});
Solución simple para todos aquellos que quieren la funcionalidad en todos los navegadores:
HTML
<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">Hide password
jQuery
$("#passwordSwitch").change(function(){
var p = $(''#password'');
var h = $(''#passwordHide'');
h.val(p.val());
if($(this).attr(''checked'')==''checked''){
h.hide();
p.show();
}else{
p.hide();
h.show();
}
});
Supongo que podría usar una imagen de fondo que contenga la palabra "contraseña" y cambiarla de nuevo a una imagen de fondo vacía en .focus() .
.blur() ----> imagen con "contraseña"
.focus() -----> imagen sin "contraseña"
También puedes hacerlo con algunos CSS y jQuery. Haga que un campo de texto se muestre exactamente encima del campo de contraseña, hide () está en foco () y enfocado en el campo de contraseña ...
Una forma definitiva de usar jQuery:
Deja el campo de entrada original oculto de la pantalla.
$("#Password").hide(); //Hide it first
var old_id = $("#Password").attr("id"); //Store ID of hidden input for later use
$("#Password").attr("id","Password_hidden"); //Change ID for hidden input
Crear nuevo campo de entrada sobre la marcha por JavaScript.
var new_input = document.createElement("input");
Migre la ID y el valor del campo de entrada oculto al nuevo campo de entrada.
new_input.setAttribute("id", old_id); //Assign old hidden input ID to new input
new_input.setAttribute("type","text"); //Set proper type
new_input.value = $("#Password_hidden").val(); //Transfer the value to new input
$("#Password_hidden").after(new_input); //Add new input right behind the hidden input
Para evitar el error en la type property cannot be changed IE como type property cannot be changed , puede encontrar esto útil como belows:
Adjunte el evento click / focus / change al nuevo elemento de entrada, para activar el mismo evento en la entrada oculta.
$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...
El antiguo elemento de entrada oculto todavía está dentro del DOM, por lo que reaccionará con el evento activado por el nuevo elemento de entrada. A medida que se intercambia la identificación, el nuevo elemento de entrada actuará como el anterior y responderá a cualquier llamada de función a la identificación de la entrada oculta anterior, pero se ve diferente.
Un poco complicado pero FUNCIONA !!! ;-)
Una solución más para todos los navegadores ... Espero que la esencia de esto ayude a alguien.
Esta solución intenta establecer el atributo de type y, si falla, simplemente crea un nuevo elemento <input> , preservando los atributos del elemento y los controladores de eventos.
changeTypeAttr.js ( GitHub Gist ):
/* x is the <input/> element
type is the type you want to change it to.
jQuery is required and assumed to be the "$" variable */
function changeType(x, type) {
x = $(x);
if(x.prop(''type'') == type)
return x; //That was easy.
try {
return x.prop(''type'', type); //Stupid IE security will not allow this
} catch(e) {
//Try re-creating the element (yep... this sucks)
//jQuery has no html() method for the element, so we have to put into a div first
var html = $("<div>").append(x.clone()).html();
var regex = /type=(/")?([^/"/s]+)(/")?/; //matches type=text or type="text"
//If no match, we add the type attribute to the end; otherwise, we replace
var tmp = $(html.match(regex) == null ?
html.replace(">", '' type="'' + type + ''">'') :
html.replace(regex, ''type="'' + type + ''"'') );
//Copy data from old element
tmp.data(''type'', x.data(''type'') );
var events = x.data(''events'');
var cb = function(events) {
return function() {
//Bind all prior events
for(i in events)
{
var y = events[i];
for(j in y)
tmp.bind(i, y[j].handler);
}
}
}(events);
x.replaceWith(tmp);
setTimeout(cb, 10); //Wait a bit to call function
return tmp;
}
}
Una solución paso
$(''#password'').get(0).type = ''text'';
usar este es muy facil
<input id="pw" onclick="document.getElementById(''pw'').type=''password'';
document.getElementById(''pw'').value='''';"
name="password" type="text" value="Password" />
$(''#pass'').focus(function() {
$(''#pass'').replaceWith("<input id=''password'' size=''70'' type=''password'' value='''' name=''password''>");
$(''#password'').focus();
});
<input id=''pass'' size=''70'' type=''text'' value=''password'' name=''password''>
jQuery.fn.outerHTML = function() {
return $(this).clone().wrap(''<div>'').parent().html();
};
$(''input#password'').replaceWith($(''input.password'').outerHTML().replace(/text/g,''password''));