تغيير نوع حقل الإدخال باستخدام jQuery

StackOverflow https://stackoverflow.com/questions/1544317

  •  20-09-2019
  •  | 
  •  

سؤال 

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

ومن المفترض أن يغير هذا #password حقل الإدخال (مع id="password") وهذا من type password إلى حقل نص عادي، ثم املأ النص "كلمة المرور".

إنه لا يعمل، رغم ذلك.لماذا؟

هنا هو النموذج:

<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>
هل كانت مفيدة؟

المحلول

وانها من المرجح جدا يتم منع هذا العمل كجزء من نموذج أمن المتصفح.

وتحرير: في الواقع، واختبار الآن في رحلات السفاري، وأحصل على type property cannot be changed خطأ

وتحرير 2: أن يبدو أن من خطأ مباشرة من مسج. باستخدام رمز DOM التوالي بعد يعمل بشكل جيد عادلة: 

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

وتحرير 3: مباشرة من المصدر مسج، وهذا يبدو أن لها صلة IE (ويمكن أن تكون إما خلل أو جزء من نموذج أمنهم، ولكن مسج ليست محددة): 

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

نصائح أخرى

أسهل...ليست هناك حاجة لإنشاء كل العناصر الديناميكية.ما عليك سوى إنشاء حقلين منفصلين، بحيث يكون أحدهما حقل كلمة المرور "الحقيقية" (type = "password") والآخر حقل كلمة المرور "المزيفة" (type = "text")، مع ضبط النص في الحقل المزيف على لون رمادي فاتح و ضبط القيمة الأولية على "كلمة المرور".ثم أضف بضعة أسطر من Javascript مع jQuery على النحو التالي:

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

لذلك عندما يقوم المستخدم بإدخال حقل كلمة المرور "المزيفة"، سيتم إخفاؤه، وسيظهر الحقل الحقيقي، وسينتقل التركيز إلى الحقل الحقيقي.لن يتمكنوا أبدًا من إدخال نص في الحقل المزيف.

عندما يغادر المستخدم حقل كلمة المرور الحقيقية، سيرى البرنامج النصي ما إذا كان فارغًا، وإذا كان الأمر كذلك فسوف يخفي الحقل الحقيقي ويظهر الحقل المزيف.

احرص على عدم ترك مسافة بين عنصري الإدخال لأن IE سيضع أحدهما بعد الآخر قليلاً (يعرض المسافة) وسيظهر الحقل وكأنه يتحرك عندما يدخله/يخرج منه المستخدم.

وحل واحد خطوة 

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

في أيامنا هذه، يمكنك استخدام فقط 

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

ولكن بطبيعة الحال، يجب عليك حقا مجرد القيام بذلك 

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

ولكن في جميع IE. هناك الحشوات لعناصر نائبة هناك لتقليد هذه الوظيفة في IE كذلك.

وهناك أكثر حل عبر متصفح ... وآمل أن جوهر هذا يساعد شخص هناك.

وهذا الحل يحاول تعيين سمة type، وإذا فشلت، فإنه ببساطة يخلق عنصر <input> الجديد، والحفاظ على سمات عنصر ومعالجات الأحداث.

وchangeTypeAttr.js ( جيثب جست ): 

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

وهذا يعمل بالنسبة لي. 

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

وهناك طريقة المثلى لاستخدام مسج:

واترك حقل إدخال الأصلي مخفي من الشاشة. 

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

إنشاء حقل إدخال جديد على الطاير من خلال جافا سكريبت. 

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

وترحيل معرف وقيمة من حقل الإدخال المخفية لحقل الإدخال الجديد. 

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 مثل type property cannot be changed، قد تجد هذه مفيدة كما belows:

وإرفاق انقر / التركيز / حدث تغيير إلى عنصر مدخلات جديدة، من أجل تحريك نفس الحدث على مدخلات المخفية. 

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

وقديم مخفي عنصر المدخلات لا يزال داخل DOM ذلك سوف تتفاعل مع الحدث الناجمة عن عنصر مدخلات جديدة. كما تبادلت ID، سوف عنصر مدخلات جديدة تتصرف مثل واحدة من العمر والاستجابة إلى أي استدعاء دالة لID المدخلات مخفي القديم، ولكن يبدو مختلفا.

<اقتباس فقرة>   

وقليلا صعبة ولكنها تعمل !!! ؛ -)

وأنا لم تختبر في IE (منذ أن كنت في حاجة الى هذا لموقع آي باد) - وهو شكل لم أتمكن من تغيير HTML ولكن بوسعي أن أضيف JS: 

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

و(المدرسة القديمة JS هو قبيح بجانب كل مسج!)

ولكن، http://bugs.jquery.com/ticket/1957 تربط MSDN : "أما من Microsoft Internet Explorer 5، تتم قراءة خاصية نوع / الكتابة مرة واحدة، ولكن فقط عندما يتم إنشاء عنصر الإدخال مع طريقة createElement وقبل إضافتها إلى وثيقة" لذلك ربما كنت قد تكرار عنصر، تغيير نوع، إضافة إلى DOM وإزالة القديم؟

هل حاولت استخدام .prop ()؟ 

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

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

ومجرد إنشاء حقل جديد لتجاوز هذا الشيء الأمن: 

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

وصلتني رسالة الخطأ نفسه أثناء محاولة للقيام بذلك في فايرفوكس 5.

وأنا بحلها باستخدام الرمز أدناه: 

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

واستخدامه، تعيين مجرد تشغيل OnFocus وو onblur سمات من الحقول إلى شيء من هذا القبيل ما يلي: 

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

وأنا استخدم هذا لحقل اسم المستخدم وكذلك، لذلك تبديل قيمة افتراضية. مجرد تعيين المعلمة الثانية من وظيفة إلى '' عندما كنت اسميها.

وأيضا قد يكون من الجدير بالذكر أن النوع الافتراضي من حقل كلمة المرور الخاصة بي هو في الواقع كلمة السر، فقط في حالة المستخدم ليس لديه جافا سكريبت تمكين أو إذا كان هناك شيء يذهب على نحو خاطئ، وبهذه الطريقة كلمة المرور الخاصة بهم لا تزال محمية.

وو$ (الوثيقة) وظيفة .ready هي مسج، والأحمال عندما يكون على تحميل الوثائق النهائي. هذا ثم يتغير حقل كلمة المرور إلى حقل النص. ومن الواضح أن عليك أن تغير "password_field_id" إلى معرف حقل كلمة المرور الخاصة بك.

لا تتردد في استخدام وتعديل التعليمات البرمجية!

وهذا الأمل يساعد الجميع الذين لديهم نفس المشكلة فعلت:)

و- CJ كينت

وتحرير: حل جيد، ولكن ليس مطلقا. يعمل على على FF8 وIE8 ولكن ليس بشكل كامل على كروم (16.0.912.75 الاصدار). الكروم لا يعرض <م> كلمة النص عند تحميل الصفحة. أيضا - وFF عرض كلمة المرور عند تشغيل التدوين الآلي في

حل بسيط لجميع أولئك الذين يريدون الوظيفة في جميع المتصفحات:

لغة البرمجة

<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">Hide password

مسج

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

وخصائص النوع لا يمكن أن تتغير تحتاج إلى استبدال أو تراكب المدخلات مع إدخال النص وإرسال قيمة لإدخال كلمة المرور على تقديم.

وأعتقد أنك يمكن أن تستخدم خلفية الصورة التي تحتوي على كلمة "كلمة السر" وتغييره مرة أخرى إلى فارغة خلفية الصورة على .focus().

و.blur() ----> صورة مع "كلمة السر"

و.focus() -----> صورة مع عدم وجود "كلمة السر"

ويمكنك أيضا أن تفعل ذلك مع بعض CSS ومسج. لديك حقل النص تظهر بالضبط على رأس حقل كلمة المرور، اخفاء () على التركيز () والتركيز على حقل كلمة المرور ...

جرب هذا
التجريبي هنا

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

وويعمل أسهل بكثير مع ما يلي: 

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

وومن أجل تحويله إلى حقل كلمة المرور مرة أخرى، (<م> افتراض حقل كلمة المرور هو علامة إدخال 2ND مع نوع النص ): 

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

وهذا العمل بالنسبة لي. 

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

استخدم هذا واحد هو سهل جدا 

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

هذا وسوف تفعل خدعة.على الرغم من أنه يمكن تحسينه لتجاهل السمات التي أصبحت الآن غير ذات صلة.

توصيل في:

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

الاستخدام:

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

كمان:

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

وببساطة هذا: 

this.type = 'password';

ومثل 

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

وهذا على افتراض أن تم تعيين حقل الإدخال إلى "النص" قبل اليد.

وهنا مقتطف صغير الذي يسمح لك بتغيير type العناصر في الوثائق.

وjquery.type.js ( جيثب جست ): 

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

وويحصل لحل المشكلة من خلال إزالة input من الوثيقة، وتغيير type ثم إعادته ما كان عليه في الأصل.

لاحظ أن هذا المقتطف تم اختبار فقط لمتصفحات بكت - أي ضمانات على أي شيء آخر

وهنا هو الطريقة التي يستخدم صورة بجانب حقل كلمة المرور للتبديل بين رؤية كلمة (إدخال النص) ولا نرى ذلك (إدخال كلمة السر). يمكنني استخدام "العين مفتوحة" و "مغلقة العين" الصورة، ولكن يمكنك استخدام ما يناسبك. الطريقة التي يعمل هو وجود اثنين من المدخلات / الصور وعند النقر على صورة، يتم نسخ القيمة من المدخلات مرئية للواحدة خفية، ومن ثم يتم تبديل وجودها. وخلافا للعديد من الإجابات الأخرى التي تستخدم أسماء ضمنية، هذا هو واحد يكفي العامة لاستخدامه عدة مرات على صفحة. انه يحط أيضا بأمان إذا جافا سكريبت غير متوفر.

وهنا هو ما اثنين من هذه تبدو وكأنها على صفحة. في هذا المثال، كلمة المرور-A قد كشفت من خلال النقر على عينه. 

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

وأنا مثل هذه الطريقة، لتغيير نوع عنصر المدخلات: old_input.clone () .... هنا مثال. هناك خانة الاختيار "id_select_multiple". إذا تم تغيير هذه إلى "المختارة"، عناصر الإدخال مع اسم "فو" يجب تغيير إلى خانات الاختيار. اذا وقفت دون رادع، وأنها يجب أن تصبح أزرار الراديو مرة أخرى. 

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

وهيريس حل 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;

ولقد خلق تمديد مسج للتبديل بين النص وكلمة المرور. يعمل في IE8 (ربما 6 و 7 أيضا، ولكن لم يتم اختباره)، وسوف لا تفقد قيمتها أو سمات: 

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

ويعمل مثل السحر. يمكنك ببساطة استدعاء $('#element').togglePassword(); إلى التبديل بين اثنين أو إعطاء الخيار إلى 'قوة' للعمل تستند على شيء آخر (مثل مربع): $('#element').togglePassword($checkbox.prop('checked'));

ومجرد خيار آخر لجميع عشاق IE8، وأنه يعمل الكمال في المتصفحات الحديثة. يمكنك فقط لون النص لتتناسب مع خلفية من المدخلات. إذا كان لديك حقل واحد، وهذا سوف يغير اللون إلى اللون الأسود عند النقر فوق التركيز / على ارض الملعب. أنا لن تستخدم هذا على الموقع العام لأنه سيكون "الخلط" معظم الناس، ولكن أنا استخدامه في قسم ADMIN حيث شخص واحد فقط لديه حق الوصول إلى المستخدمين كلمات السر. 

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

و-أو - 

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

وهذا، هناك حاجة أيضا، وتغيير خلفية النص إلى الأبيض عند مغادرة الملعب. بسيط، بسيط، بسيط. 

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

[خيار آخر] الآن، إذا كان لديك العديد من المجالات التي تقوم بالتدقيق ل، مع كل نفس ID، وأنا استخدامه لإضافة فئة من 'تمرير' إلى الحقول التي تريد إخفاء النص في. تعيين نوع حقول كلمة المرور ل 'نص'. بهذه الطريقة، فقط الحقول مع فئة من "تمرير" سيتم تغييرها. 

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

وهنا الجزء الثاني من هذا. هذا يغير خلفية النص إلى الأبيض بعد مغادرة أرض الملعب. 

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top