jQuery ile giriş alanının türünü değiştirme

$(document).ready(function() {
    // #login-box password field
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

Bunun, normal bir metin alanına ait #passwordgiriş alanını (ile id="password") değiştirmesi ve type password“Parola” metnini doldurması gerekir.

Yine de çalışmıyor. Neden?

İşte form:

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

Bu eylemin, tarayıcının güvenlik modelinin bir parçası olarak engellenmesi muhtemeldir.

Düzenleme: gerçekten, şu anda Safari'de test, hatayı alıyorum type property cannot be changed.

Düzenleme 2: Bu doğrudan jQuery dışında bir hata gibi görünüyor. Aşağıdaki düz DOM kodunu kullanmak gayet iyi çalışıyor:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

Düzenleme 3: Doğrudan jQuery kaynağından, bu IE ile ilgili gibi görünüyor (ve bir hata veya güvenlik modelinin bir parçası olabilir, ancak jQuery belirli değildir):

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

Daha da kolay ... tüm dinamik eleman yaratmaya gerek yok. Sahte alandaki metni açık gri renge ayarlayarak, birini 'gerçek' şifre alanı (type = "şifre") ve diğerini "sahte" şifre alanı (type = "metin") yapan iki ayrı alan oluşturmanız yeterlidir. başlangıç ​​değerini 'Şifre' olarak ayarlayın. Sonra jQuery ile birkaç satır Javascript ekleyin aşağıdaki gibi:

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

Böylece kullanıcı 'sahte' şifre alanına girdiğinde gizlenir, gerçek alan gösterilir ve odak gerçek alana taşınır. Sahte alana asla metin giremezler.

Kullanıcı gerçek parola alanını terk ettiğinde, komut dosyası boş olup olmadığını görür ve gerçek alanı gizler ve sahte olanı gösterir.

İki giriş öğesi arasında boşluk bırakmamaya dikkat edin, çünkü IE birbiri ardına biraz boşluk bırakacaktır (boşluk oluşturma) ve alan kullanıcı girdiğinde / çıkarken hareket ediyor gibi görünecektir.

Tek adımlı çözüm

$('#password').get(0).type = 'text';

Günümüzde,

$("#password").prop("type", "text");

Ama elbette, bunu gerçekten yapmalısın

<input type="password" placeholder="Password" />

IE hariç tümünde. IE'de bu işlevselliği taklit etmek için orada yer tutucu şimler vardır.

Daha çapraz tarayıcı çözümü… Umarım bunun özü orada birine yardım eder.

Bu çözüm typeözelliği ayarlamaya çalışır ve başarısız olursa, <input>öğe niteliklerini ve olay işleyicilerini koruyarak yeni bir öğe oluşturur .

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;
    }
}

Bu benim için çalışıyor.

$('#password').replaceWith($('#password').clone().attr('type', 'text'));

JQuery kullanmanın en iyi yolu:

Orijinal giriş alanını ekrandan gizli bırakın.

$("#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

JavaScript ile anında yeni giriş alanı oluşturun.

var new_input = document.createElement("input");

Kimliği ve değeri gizli giriş alanından yeni giriş alanına geçirin.

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

IE gibi hata almak için type property cannot be changed, belows bu yararlı bulabilirsiniz:

Gizli olayda aynı olayı tetiklemek için tıklama / odaklama / değiştirme olayını yeni girdi öğesine ekleyin.

$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...

Eski gizli giriş öğesi hala DOM'un içinde olduğundan yeni giriş öğesi tarafından tetiklenen olaya tepki verir. Kimlik değiştirilirken, yeni giriş öğesi eskisi gibi davranır ve eski gizli girişin kimliğine yapılan herhangi bir işlev çağrısına yanıt verir, ancak farklı görünür.

Biraz zor ama çalışıyor !!! ;-)

.Prop () yöntemini kullanmayı denediniz mi?

$("#password").prop('type','text');

http://api.jquery.com/prop/

IE'de test etmedim (bir iPad sitesi için buna ihtiyaç duyduğumdan) - HTML'yi değiştiremediğim bir form ama JS ekleyebilirim:

document.getElementById('phonenumber').type = 'tel';

(Eski okul JS, tüm jQuery'nin yanında çirkin!)

Ancak, http://bugs.jquery.com/ticket/1957 MSDN'ye bağlanır: "Microsoft Internet Explorer 5'ten itibaren type özelliği read / write-kez, ancak createElement yöntemiyle bir girdi öğesi oluşturulduğunda ve belgeye eklenmeden önce. " belki öğeyi çoğaltabilir, türü değiştirebilir, DOM'a ekleyebilir ve eskisini kaldırabilirsiniz?

Bu güvenlik olayını atlamak için yeni bir alan oluşturmanız yeterlidir:

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .val($oldPassword.val())
                          .appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');

Firefox 5'te bunu yapmaya çalışırken aynı hata iletisini aldım.

Aşağıdaki kodu kullanarak çözdüm:

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

Bunu kullanmak için, alanlarınızın onFocus ve onBlur özelliklerini aşağıdaki gibi bir şeye ayarlayın:

<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');">

Bunu bir kullanıcı adı alanı için de kullanıyorum, bu yüzden varsayılan bir değer değiştirir. Aradığınızda işlevin ikinci parametresini '' olarak ayarlamanız yeterlidir.

Ayrıca, bir kullanıcının javascript'i etkinleştirmemiş olması veya bir şeyler yanlış gitmesi durumunda, şifre alanımın varsayılan türünün gerçekten şifre olduğunu belirtmek gerekir.

$ (Document) .ready işlevi jQuery'dir ve belgenin yüklenmesi tamamlandığında yüklenir. Bu daha sonra parola alanını bir metin alanına değiştirir. Açıkçası 'password_field_id' i şifre alanınızın kimliğiyle değiştirmeniz gerekecektir.

Kodu kullanmaktan ve değiştirmekten çekinmeyin!

Umarım bu aynı problemi yaşayan herkese yardımcı olur :)

- CJ Kent

EDIT: İyi bir çözüm ama mutlak değil. FF8 ve IE8 üzerinde çalışır, ancak Chrome'da tam olarak değil (16.0.912.75 ver). Chrome,Sayfa yüklendiğinde Şifre metnini . Ayrıca - Otomatik doldurma açıldığında FF şifrenizi görüntüler.

Tüm tarayıcılarda işlevselliği isteyenler için basit bir çözüm:

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();
    }
});

Bu benim için çalıştı.

$('#newpassword_field').attr("type", 'text');

Tür özellikleri değiştirilemez, girdiyi bir metin girişi ile değiştirmeniz veya üzerine yerleştirmeniz ve değeri gönderildiğinde şifre girişine göndermeniz gerekir.

"Şifre" kelimesini içeren bir arka plan resmi kullanabilir ve tekrar boş bir arka plan resmi olarak değiştirebilirsiniz. .focus() .

.blur() ----> "şifre" ile resim

.focus() -----> "şifre" olmayan resim

Bazı CSS ve jQuery ile de yapabilirsiniz. Bir metin alanının tam olarak şifre alanının üstünde görünmesini sağlayın, hide () odakta () ve şifre alanına odaklanın ...

Bu Demoyu deneyin
burada

$(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+'">');
}); 

Bununla daha kolay çalışır:

document.querySelector('input[type=password]').setAttribute('type', 'text');

ve tekrar şifre alanına döndürmek için ( şifre alanının metin türünde 2. giriş etiketi olduğu varsayılarak ):

document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')

bunu kullan çok kolay

<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'));

Bu hile yapacak. Her ne kadar şu anda alakasız olan özellikleri göz ardı etmek geliştirilebilir.

Eklenti:

(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);

Kullanımı:

$(":submit").changeType("checkbox");

Vaktini boşa harcamak:

http://jsfiddle.net/joshcomley/yX23U/

Basitçe bu:

this.type = 'password';

gibi

$("#password").click(function(){
    this.type = 'password';
});

Bu, giriş alanınızın önceden "metin" olarak ayarlandığını varsayar.

typeBelgelerdeki öğeleri değiştirmenize izin veren küçük bir snippet .

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;
    }
}

Belgeden kaldırarak input, değiştirerek typeve daha sonra orijinal olduğu yere geri koyarak sorunu çözer.

Bu snippet'in yalnızca WebKit tarayıcıları için test edildiğini unutmayın - başka hiçbir şey için garanti verilmez!

İşte parola görmek (metin girişi) ve görmemek (parola girişi) arasında geçiş yapmak için parola alanının yanındaki görüntüyü kullanan bir yöntem. Bir "açık göz" ve "kapalı göz" görüntüsü kullanıyorum, ancak size uygun olanı kullanabilirsiniz. Çalışma şekli iki girişe / görüntüye sahip olmak ve görüntüyü tıklattığınızda, değer görünür girişten gizli girişe kopyalanır ve görünürlüğü değiştirilir. Sabit kodlu isimler kullanan diğer cevapların çoğundan farklı olarak, bu cevap bir sayfada birden çok kez kullanılacak kadar geneldir. Ayrıca, JavaScript kullanılamıyorsa da yavaşça bozunur.

İşte bunlardan ikisinin bir sayfada nasıl göründüğü. Bu örnekte, Parola-A gözüne tıklanarak açıklanmıştır.

$(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>

Bir girdi öğesinin türünü değiştirmek için bu şekilde seviyorum: old_input.clone () .... İşte bir örnek. "İd_select_multiple" onay kutusu var. Bu "seçili" olarak değiştirilirse, "foo" adlı giriş öğeleri onay kutularına çevrilmelidir. İşaretlenmezse, tekrar radyo düğmeleri haline getirilmelidir.

  $(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();
     });
    }
  )});

heres bir DOM çözümü

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;

Metin ve şifre arasında geçiş yapmak için bir jQuery uzantısı oluşturdum. IE8'de çalışır (muhtemelen 6 ve 7 de vardır, ancak test edilmemiştir) ve değerinizi veya niteliklerinizi kaybetmez:

$.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);
        }
    });
};

Tıkır tıkır çalışıyor. $('#element').togglePassword();İkisi arasında geçiş yapmak için arayabilir veya eylemi başka bir şeye (onay kutusu gibi) dayalı olarak 'zorlama' seçeneği sunabilirsiniz:$('#element').togglePassword($checkbox.prop('checked'));

Tüm IE8 sevenler için sadece başka bir seçenek ve yeni tarayıcılarda mükemmel çalışıyor. Metni yalnızca girişin arka planına uyacak şekilde renklendirebilirsiniz. Tek bir alanınız varsa, alana tıkladığınızda / odaklandığınızda bu renk siyaha dönüşür. Bunu çoğu insanın kafasını karıştıracağı için herkese açık bir sitede kullanmam, ancak yalnızca bir kişinin kullanıcıların parolalarına erişebildiği bir ADMIN bölümünde kullanıyorum.

$('#MyPass').click(function() {
    $(this).css('color', '#000000');
});

-VEYA-

$('#MyPass').focus(function() {
    $(this).css('color', '#000000');
});

Bu, aynı zamanda, alandan çıktığınızda metni tekrar beyaza dönüştürecektir. Basit, basit, basit.

$("#MyPass").blur(function() {
    $(this).css('color', '#ffffff');
});

[Başka Bir Seçenek] Şimdi, kontrol ettiğiniz birkaç alanınız varsa, hepsini kullandığım kimliğe sahip aynı kimliğe sahipseniz, metni gizlemek istediğiniz alanlara bir 'pass' sınıfı ekleyin. parola alanları 'metin' yazın. Bu şekilde, sadece 'pass' sınıfına sahip alanlar değiştirilecektir.

<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
});

İşte bunun ikinci kısmı. Bu, alandan çıktıktan sonra metni tekrar beyaza dönüştürür.

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});

Ben sadece bir giriş türünü değiştirmek için aşağıdakileri yaptım:

$('#ID_of_element')[0].type = 'text';

ve çalışıyor.

ASP NET Core 3.1 projesinde jQuery UI datepickers 'kullanıyordum ve onlar Chromium tabanlı tarayıcılarda düzgün çalışmıyor çünkü bunu yapmak gerekiyordu (bkz: https://stackoverflow.com/a/61296225/7420301 ).