jQuery সহ ইনপুট ক্ষেত্রের ধরণ পরিবর্তন করুন

Question

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

Comments

কেন আপনি এটি পরিবর্তন করতে চান?

— কেওসপ্যান্ডিয়ন

আমি ইনপুটে একটি ব্যবহারকারীর গোপনীয় 'পাসওয়ার্ড' পাঠ্য রাখতে চাই যাতে ব্যবহারকারীরা কী পূরণ করতে হবে (কারণ কোনও লেবেল নেই) know

— রিচার্ড নপ

এই ভিডিওটি দেখুন: youtube.com/watch?v=5YSqtB0kfE

— গ্রিজেশ চৌহান

Answer 1

এটি সম্ভবত ব্রাউজারের সুরক্ষা মডেলের অংশ হিসাবে এই ক্রিয়াটি প্রতিরোধ করা হয়েছে।

সম্পাদনা: সত্যই, এখনই সাফারিতে পরীক্ষা করা, আমি ত্রুটি পেয়েছি type property cannot be changed।

সম্পাদনা 2: এটি সরাসরি jQuery এর বাইরে একটি ত্রুটি বলে মনে হচ্ছে। নিম্নলিখিত সোজা DOM কোড ব্যবহার করে ঠিক কাজ করে:

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

3 সম্পাদনা করুন: সরাসরি jQuery উত্স থেকে, এটি আইই সম্পর্কিত বলে মনে হয় (এবং এটি কোনও বাগ বা তাদের সুরক্ষা মডেলের অংশ হতে পারে, তবে jQuery নির্দিষ্ট নয়):

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

Comments

বলতে হবে, এটি এখন পর্যন্ত দেখা সবচেয়ে অব্যর্থ সুরক্ষা পরিমাপ। ক্ষেত্রের ধরণটি দ্রুত পরিবর্তন করা এবং একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে একে নতুন নতুন নতুন করে প্রতিস্থাপনের মধ্যে পার্থক্য মনে হয় না। খুব আজব ... যাইহোক, আমার জন্য কাজ করেছেন। ধন্যবাদ!

এটি সুরক্ষা মডেল স্টাফ নয়, আমি নিশ্চিত করতে পারি যে এটি ত্রুটিযুক্ত আইই 7, আই 8 এ কাজ করে না: ধরণের সম্পত্তিটি পাওয়া যায়নি

— কোড নভিটিয়েট

এই উত্তরটি অনুসন্ধানে পাওয়া গেল এবং এটি একটি দুর্দান্ত সহায়তা help যাইহোক, আমার সমাধানটি ছিল কেবল চেকটি jquery থেকে অপসারণ করা। দুর্দান্ত কাজ করেছেন

— মাইকেল 22

@ মিশেল, আমি সরাসরি jQuery পরিবর্তনের বিরুদ্ধে সুপারিশ করব। এছাড়াও এটি এগিয়ে যাওয়ার দ্বন্দ্বের দায়বদ্ধতা তৈরি করে, সম্ভবত কোনও কারণেই এই চেকটি স্থানে রয়েছে। আইই সমর্থন সম্পর্কে আপনার যদি উদ্বিগ্ন হওয়ার দরকার না থাকে তবে আপনি পরিবর্তে এমন একটি jQuery এক্সটেনশন প্রয়োগ করতে পারেন যা সমান্তরাল attrকিন্তু উপাদানগুলিতে typeবৈশিষ্ট্য পরিবর্তন করার অনুমতি দেয় input।

— চোখের পলকটি

সবেমাত্র আপডেট 4 যুক্ত করা হয়েছে - আশা করি এটি জিনিসগুলি এবং কীভাবে তাদের কাছাকাছি আসবে তা ব্যাখ্যা করতে সহায়তা করে।

— ক্লার্কবয়

Answer 2

এমনকি সহজ ... সমস্ত গতিশীল উপাদান তৈরি করার প্রয়োজন নেই। একটি দুটি আসল ক্ষেত্র তৈরি করুন, যার মধ্যে একটি 'আসল' পাসওয়ার্ড ক্ষেত্র (টাইপ = "পাসওয়ার্ড") এবং একটি 'নকল' পাসওয়ার্ড ক্ষেত্র (টাইপ = "পাঠ্য"), নকল ক্ষেত্রে পাঠ্যকে হালকা ধূসর বর্ণে সেট করে এবং প্রাথমিক মানটিকে 'পাসওয়ার্ড' এ সেট করা হচ্ছে। তারপরে নীচে 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()" />

সুতরাং যখন ব্যবহারকারী 'জাল' পাসওয়ার্ড ক্ষেত্রে প্রবেশ করবে এটি লুকিয়ে থাকবে, আসল ক্ষেত্রটি প্রদর্শিত হবে এবং ফোকাসটি আসল ক্ষেত্রে চলে যাবে to তারা কখনই নকল ক্ষেত্রে পাঠ্য প্রবেশ করতে সক্ষম হবে না।

যখন ব্যবহারকারী আসল পাসওয়ার্ড ক্ষেত্রটি ছেড়ে যায় তখন স্ক্রিপ্টটি খালি কিনা তা দেখতে পাবে এবং যদি তা প্রকৃত ক্ষেত্রটি আড়াল করে নকলটি দেখায়।

দুটি ইনপুট উপাদানগুলির মধ্যে কোনও স্থান না রেখে সতর্ক থাকুন কারণ আইই অন্যটির পরে কিছুটা অবস্থান করে (স্থানটি সরবরাহ করে) এবং ব্যবহারকারী যখন প্রবেশ করবে / প্রস্থান করবে তখন ক্ষেত্রটি স্থানান্তরিত হবে।

Comments

আপনি নিম্নলিখিত ক্রিয়াকলাপগুলিও চেইন করতে পারেন: $('#password').show(); $('#password').focus();যেমন$('#password').show().focus();

— আনারিস্ট মাইবার্গ

আমার উভয় ক্ষেত্র এক সাথে রয়েছে: <ইনপুট টাইপ = "পাঠ্য" /> <ইনপুট টাইপ = "পাসওয়ার্ড" /> এবং আমি এখনও আইই (9) এ উল্লিখিত হলে একটি উল্লম্ব শিফট পাই। পদ্ধতিগুলি শৃঙ্খলাবদ্ধ করে ($ ('# পাসওয়ার্ড') show দেখান ()। ফোকাস ();) তাতে সহায়তা করেনি, তবে এটি একটি মজাদার অপ্টিমাইজেশান পদক্ষেপ ছিল। সব মিলিয়ে এটিই ছিল সেরা সমাধান।

— এভিপ্রোগ্রামার

যদি ব্যবহারকারী অন্য নিয়ন্ত্রণে ফোকাস স্থানান্তরিত করে এবং onblur বরখাস্ত হয় তবে ফোকাসটি নকল পাসওয়ার্ড ক্ষেত্রে ফিরে যাবে

— অ্যালান চুয়া

আপনার ব্যবহার করা উচিত: যদি ($ ('# পাসওয়ার্ড')। ভাল () == '') {এর পরিবর্তে: যদি ($ ('# পাসওয়ার্ড')। অ্যাটর ('মান') == '') {অন্যথায় পাসওয়ার্ড মান সর্বদা 'পাসওয়ার্ড' অন্বলুর প্রদর্শন করবে।

— স্টিফেন পল

Answer 3

একটি পদক্ষেপ সমাধান

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

Comments

document.getElementByIdপর্যাপ্ত হতে হবে এবং এর জন্য আপনার jQuery দরকার নেই! ;-)

— গেন্ডারো

আসলে, প্রশ্ন অনুসারে, এটি ছিল jQuery সমাধান ery

— সংগীত সাহু

বা তার চেয়েও ছোট একটি, $ ('# পাসওয়ার্ড') [0]। টাইপ = 'পাঠ্য';

— সংগীত সাহু

এটি আই 9 এর সাথে সমস্যা সৃষ্টি করতে পারে, টাইপটি অপরিজ্ঞাত। যদিও অন্য ব্রাউজারগুলির জন্য দুর্দান্ত।

— kravits88

আপনি যদি এইভাবে "পাসওয়ার্ড" থেকে "পাঠ্যে" প্রকারটি পরিবর্তন করতে চান তবে IE 8 আসলে একটি ত্রুটি ফেলবে। ত্রুটিটি বলে "ধরণের সম্পত্তি পাওয়া যায়নি This এই আদেশটি সমর্থিত নয়।"

— allieferr

Answer 4

আজকাল, আপনি কেবল ব্যবহার করতে পারেন

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

তবে অবশ্যই, আপনার সত্যই এটি করা উচিত

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

আই আই ছাড়া সব। IE তেও সেই কার্যকারিতাটি নকল করতে প্লেসোল্ডার শিমস আউট আছে।

Comments

একটি জেএসফিডাল ডেমোplaceholder="Password" । এইচটিএমএল বৈশিষ্ট এবং MDN উপর placeholderঅ্যাট্রিবিউট। এর জন্য একটি জাভাস্ক্রিপ্ট শিমplaceholder ।

— ররি ও'কেনে

আইই 8 এখন মারা গেছে। দীর্ঘ লাইভ নেটিভ এইচটিএমএল সমাধান। আপনার স্থানধারককে ছুঁড়ে ফেলে দিন এবং উদযাপন করুন।

— অ্যান্ড্রু

Answer 5

আরও একটি ক্রস ব্রাউজার সমাধান… আমি আশা করি এর সংক্ষিপ্তসারটি সেখানে কাউকে সহায়তা করবে।

এই সমাধানটি 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;
    }
}

Comments

এটি কেবল টুওও খারাপ, সবাই যদি এফ ... এটি বলে, তবে কিছুই কার্যকর হবে না, এটি ক্রস ব্রাউজারে কাজ করা উচিত বা আদৌ নয়।

— Val,

গিস্টগুলির বক্তব্য ... আপনার এই কোডটির জন্য একটি তৈরি করা উচিত। gist.github.com

— ক্রিস্টোফার পার্কার

Answer 6

এটি আমার পক্ষে কাজ করে।

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

Comments

ধন্যবাদ! আইই তে কাজ না করে অন্যান্য উত্তরগুলির সাথে আমার যে সমস্যা ছিল তা এটি সমাধান করে। কেবল মনে রাখবেন এটি একটি নতুন অবজেক্ট তাই আপনাকে যদি ভেরিয়েবলে $ ('# পাসওয়ার্ড') সংরক্ষণ করে থাকে তবে আপনাকে এটি ডিওএম থেকে পুনরায় গ্রহন করতে হবে।

— kravits88

এটি আই 8 তে কাজ করে না। আপনি এখনও "ধরণের সম্পত্তি পরিবর্তন করা যায় না" ত্রুটি পান।

— jcoffland

Answer 7

JQuery ব্যবহার করার একটি চূড়ান্ত উপায়:

---

আসল ইনপুট ক্ষেত্রটি স্ক্রীন থেকে লুকিয়ে রেখে দিন।

$("#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, আপনি নীচের হিসাবে এটি দরকারী খুঁজে পেতে পারেন:

লুকানো ইনপুটটিতে একই ইভেন্টটি ট্রিগার করতে ক্লিক / ফোকাস / ইভেন্টটিকে নতুন ইনপুট উপাদানের সাথে সংযুক্ত করুন।

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

পুরাতন লুকানো ইনপুট উপাদানটি এখনও ডিওমের অভ্যন্তরে রয়েছে সুতরাং নতুন ইনপুট উপাদানটির দ্বারা ঘটানো ইভেন্টটির সাথে প্রতিক্রিয়া জানাবে। আইডি অদলবদল হওয়ার সাথে সাথে নতুন ইনপুট উপাদানটি পুরানোটির মতো কাজ করবে এবং পুরাতন লুকানো ইনপুটটির আইডিতে কোনও ফাংশন কলের প্রতিক্রিয়া জানাবে, তবে ভিন্ন দেখাচ্ছে looks

কিছুটা কৌতুকময় কিন্তু ওয়ার্কস !!! ;-)

Answer 8

আপনি .prop () ব্যবহার করার চেষ্টা করেছেন?

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

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

Comments

কর্ডোভা 6 ওয়েবভিউতে কাজ করে

— জোয়েল ক্যাটন

Answer 9

আমি IE তে পরীক্ষা করিনি (যেহেতু আইপ্যাড সাইটের জন্য আমার এটির প্রয়োজন ছিল) - এমন একটি ফর্ম যা আমি এইচটিএমএল পরিবর্তন করতে পারি না তবে আমি জেএস যুক্ত করতে পারি:

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

(পুরানো স্কুল জেএস সমস্ত jQuery এর পাশেই কুশ্রী!)

তবে, http://bugs.jquery.com/ticket/1957 এমএসডিএন-এর সাথে লিঙ্ক করেছে: "মাইক্রোসফ্ট ইন্টারনেট এক্সপ্লোরার 5 হিসাবে, প্রকারের সম্পত্তিটি একবারে / পড়ার সময় পড়তে হয় তবে কেবল তখনই তৈরির উপাদান পদ্ধতিতে কোনও ইনপুট উপাদান তৈরি হয় এবং এটি নথিতে যুক্ত হওয়ার আগে "। সুতরাং সম্ভবত আপনি উপাদানটি নকল করতে, ধরণের পরিবর্তন করতে, ডিওমে যুক্ত করতে এবং পুরাতনটিকে সরাতে পারবেন?

Answer 10

এই সুরক্ষা বিষয়টিকে বাইপাস করার জন্য কেবল একটি নতুন ক্ষেত্র তৈরি করুন:

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

Answer 11

ফায়ারফক্স 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>

এবং এটি ব্যবহারের জন্য, কেবলমাত্র আপনার ক্ষেত্রগুলির অনফোকাস এবং অনুলার বৈশিষ্ট্যগুলি নীচের মতো কিছুতে সেট করুন:

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

আমি এটি ব্যবহারকারীর নাম ক্ষেত্রের জন্যও ব্যবহার করি, সুতরাং এটি একটি ডিফল্ট মান টগল করে। আপনি যখন কল করবেন তখন কেবলমাত্র ফাংশনের দ্বিতীয় প্যারামিটারটি সেট করুন।

এছাড়াও এটি লক্ষণীয় যে, আমার পাসওয়ার্ড ক্ষেত্রের ডিফল্ট ধরণটি আসলে পাসওয়ার্ড a

$ (দস্তাবেজ)। প্রস্তুত ফাংশনটি jQuery হয় এবং ডকুমেন্টটি লোড করা শেষ হলে লোড হয়। এরপরে পাসওয়ার্ড ক্ষেত্রটি পাঠ্যের ক্ষেত্রে পরিবর্তিত হয়। অবশ্যই আপনার পাসওয়ার্ড ক্ষেত্রের আইডিতে আপনাকে 'পাসওয়ার্ড_ফিল্ড_আইডি' পরিবর্তন করতে হবে।

কোডটি নির্বিঘ্নে ব্যবহার এবং সংশোধন করুন!

আশা করি এটিই আমার সকলের মতো একই সমস্যাযুক্ত সকলকে সহায়তা করবে :)

- সিজে কেন্ট

সম্পাদনা: ভাল সমাধান তবে পরম নয়। এফএফ 8 এবং আইই 8 তে কাজ করে তবে ক্রোমে সম্পূর্ণরূপে নয় (16.0.912.75 ভেরি)। পৃষ্ঠাটি লোড হওয়ার পরে ক্রোম পাসওয়ার্ড পাঠ্য প্রদর্শন করে না । এছাড়াও - অটোফিল চালু থাকলে এফএফ আপনার পাসওয়ার্ড প্রদর্শন করবে।

Answer 12

যারা সমস্ত ব্রাউজারে কার্যকারিতা চান তাদের সকলের জন্য সহজ সমাধান:

এইচটিএমএল

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

Answer 13

এটা আমার জন্য কাজ করেছে।

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

Answer 14

প্রকারের বৈশিষ্ট্যগুলি পরিবর্তন করা যাবে না আপনার পাঠ্য ইনপুট দিয়ে ইনপুটটি প্রতিস্থাপন বা ওভারলে করতে হবে এবং জমা দেওয়ার সময় পাসওয়ার্ড ইনপুটটিতে মান প্রেরণ করতে হবে।

Answer 15

আমার ধারণা আপনি একটি ব্যাকগ্রাউন্ড-চিত্র ব্যবহার করতে পারেন যা "পাসওয়ার্ড" শব্দটি ধারণ করে এবং এটি খালি ব্যাকগ্রাউন্ড-চিত্রটিতে ফিরে যেতে পারে .focus()।

.blur() ----> "পাসওয়ার্ড" সহ চিত্র

.focus() -----> কোনও "পাসওয়ার্ড" ছাড়াই চিত্র

আপনি এটি কিছু সিএসএস এবং jQuery দিয়েও করতে পারেন। পাসওয়ার্ড ক্ষেত্রের ঠিক উপরে একটি পাঠ্য ক্ষেত্র প্রদর্শিত হবে, লুকান () ফোকাসে থাকে) () এবং পাসওয়ার্ড ক্ষেত্রে ফোকাস করুন ...

Answer 16

এই ডেমো এখানে চেষ্টা
করুন

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

Answer 17

এটি এর সাথে আরও সহজভাবে কাজ করে:

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

এবং এটিকে আবার পাসওয়ার্ড ক্ষেত্রে ফিরিয়ে আনতে ( পাসওয়ার্ড ক্ষেত্রটি পাঠ্যের প্রকারের সাথে ২ য় ইনপুট ট্যাগ হিসাবে ধরে নেওয়া ):

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

Answer 18

এটি ব্যবহার করুন এটি খুব সহজ

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />

Answer 19

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

Answer 20

jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));

Answer 21

এই কৌশলটি করবে। যদিও এটি এখন অপ্রাসঙ্গিক এমন বৈশিষ্ট্যগুলি উপেক্ষা করার জন্য এটি উন্নত করা যেতে পারে।

প্লাগ লাগানো:

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

Answer 22

কেবল এই:

this.type = 'password';

যেমন

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

এটি ধরে নেওয়া হচ্ছে যে আপনার ইনপুট ক্ষেত্রটি হাতের আগে "পাঠ্য" এ সেট করা হয়েছিল।

Answer 23

এখানে একটি ছোট স্নিপেট যা আপনাকে 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এবং তারপরে যেখানে এটি ছিল সেখানে ফিরে রেখে সমস্যার সমাধান করে।

মনে রাখবেন যে এই স্নিপেটটি কেবল ওয়েবকিট ব্রাউজারগুলির জন্যই পরীক্ষা করা হয়েছিল - অন্য কোনও কিছুর কোনও গ্যারান্টি নেই!

Comments

আসলে, এটি ভুলে যান - কেবল delete jQuery.attrHooks.typejQuery এর বিশেষ ইনপুট ধরণের হ্যান্ডলিং অপসারণ করতে ব্যবহার করুন।

— জেবি।

Answer 24

এখানে একটি পদ্ধতি যা পাসওয়ার্ড ক্ষেত্রের পাশের একটি চিত্র ব্যবহার করে পাসওয়ার্ড (পাঠ্য ইনপুট) দেখতে না পারা এবং এটি (পাসওয়ার্ড ইনপুট) না দেখার মধ্যে টগল করতে। আমি একটি "খোলা চোখ" এবং "বদ্ধ চোখ" চিত্র ব্যবহার করি তবে আপনি যা পছন্দ করেন তা ব্যবহার করতে পারেন। এটি যেভাবে কাজ করে তাতে দুটি ইনপুট / চিত্র রয়েছে এবং চিত্রটি ক্লিক করার পরে, দৃশ্যমান ইনপুট থেকে লুকানোটিতে অনুলিপি করা হয় এবং তারপরে তার দৃশ্যমানতা অদলবদল হয়। হার্ডকডযুক্ত নাম ব্যবহার করে এমন আরও অনেক উত্তরের বিপরীতে, এটি কোনও পৃষ্ঠায় একাধিকবার ব্যবহার করার পক্ষে যথেষ্ট সাধারণ। এটি জাভাস্ক্রিপ্ট অনুপলব্ধ থাকলে কৌতূহলজনকভাবে হ্রাস করে।

এই দুটি পৃষ্ঠায় দেখতে কেমন তা এখানে। এই উদাহরণে, পাসওয়ার্ড-এ এর চোখের উপর ক্লিক করে প্রকাশিত হয়েছে।

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

Answer 25

আমি এইভাবে পছন্দ করি, একটি ইনপুট উপাদানটির ধরণের পরিবর্তন করতে: old_input.clone () .... এখানে একটি উদাহরণ। "Id_select_m Multipleple" একটি চেক বাক্স রয়েছে। এটি যদি "নির্বাচিত" তে পরিবর্তিত হয় তবে "foo" নামের ইনপুট উপাদানগুলি চেক বাক্সে পরিবর্তন করা উচিত। যদি এটি পরীক্ষা না করা হয় তবে এগুলি আবার রেডিও বোতামে পরিণত হওয়া উচিত।

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

Comments

এটি আই 8 তে কাজ করে না। আপনি এখনও "ধরণের সম্পত্তি পরিবর্তন করা যায় না" ত্রুটি পান।

— jcoffland

Answer 26

heres একটি 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;

Answer 27

আমি পাঠ্য এবং পাসওয়ার্ডের মধ্যে টগল করতে একটি jQuery এক্সটেনশন তৈরি করেছি। আইই 8 এ কাজ করে (সম্ভবত 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'));

Answer 28

সমস্ত আই 88 প্রেমীদের জন্য অন্য একটি বিকল্প এবং এটি নতুন ব্রাউজারগুলিতে নিখুঁতভাবে কাজ করে। আপনি ইনপুটটির পটভূমি মেলে পাঠ্যটিকে রঙ করতে পারেন color আপনার যদি একটি একক ক্ষেত্র থাকে, আপনি যখন ক্ষেত্রটিতে ক্লিক করুন / ফোকাস করবেন তখন রঙটি কালোতে পরিবর্তন হবে। আমি এটি কোনও পাবলিক সাইটে ব্যবহার করব না কারণ এটি বেশিরভাগ লোককে 'বিভ্রান্ত করবে', তবে আমি এটি এডমিন বিভাগে ব্যবহার করছি যেখানে কেবলমাত্র একজন ব্যক্তির ব্যবহারকারীর পাসওয়ার্ড অ্যাক্সেস রয়েছে।

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

-অথবা-

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

এটি ক্ষেত্রটি ছেড়ে যাওয়ার পরে এটিও প্রয়োজনীয়, পাঠ্যটিকে সাদা রঙে বদলে দেবে। সরল, সরল, সরল।

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

[অন্য বিকল্প] এখন, যদি আপনি কয়েকটি আইডির জন্য যাচাই করে দেখেন, সমস্ত একই আইডির সাথে, আমি যেমন এটি ব্যবহার করছি, আপনি যে ক্ষেত্রটি পাঠ্যটি আড়াল করতে চান তাতে 'পাস' একটি শ্রেণি যুক্ত করুন Set সেট করুন পাসওয়ার্ড ক্ষেত্র 'পাঠ্য' টাইপ করুন। এইভাবে, কেবল 'পাস' শ্রেণীর ক্ষেত্রগুলি পরিবর্তন করা হবে।

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

Answer 29

আমি একটি ইনপুট ধরণের পরিবর্তন করতে কেবল নিম্নলিখিতটি করেছি:

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

এবং এটি কাজ করে।

আমার এটি করার দরকার ছিল কারণ আমি একটি এএসপি নেট কোর ৩.১ প্রকল্পে jQuery UI ডেটপিকার্স ব্যবহার করছিলাম এবং তারা ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলিতে সঠিকভাবে কাজ করছে না (দেখুন: https://stackoverflow.com/a/61296225/7420301 )।