복붙노트

[JQUERY] jQuery로 입력 필드의 변화 형

JQUERY

jQuery로 입력 필드의 변화 형

해결법


  1. 1.그것은 매우 가능성이 조치는 브라우저의 보안 모델의 일환으로 방지합니다.

    그것은 매우 가능성이 조치는 브라우저의 보안 모델의 일환으로 방지합니다.

    편집 : 실제로, Safari에서 지금 테스트, 나는 오류 유형의 속성을 변경할 수 없습니다 얻을.

    편집 2 : jQuery를의 오류 똑바로 것으로 보인다. 다음 직선 DOM 코드를 사용하면 잘 작동합니다 :

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

    편집 3 : jQuery를 소스로부터 스트레이트, 이것은 IE 관련이있을 것으로 보인다 (그리고 하나의 보안 모델의 버그의 일부가 될 수 있지만, 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";
    

  2. 2.더 쉬운 방법 ... 모든 동적 요소 생성을위한 필요가 없습니다. 그냥 ( "암호"= 유형)이 '진짜'암호 필드를 만들고 하나 '가짜'암호 필드 (유형 = "텍스트"), 밝은 회색 컬러에 가짜 필드의 텍스트를 설정, 두 개의 필드를 만들고 '비밀번호'에 대한 초기 값을 설정. 그런 다음 아래로 jQuery를 함께 자바 스크립트의 몇 줄을 추가합니다 :

    더 쉬운 방법 ... 모든 동적 요소 생성을위한 필요가 없습니다. 그냥 ( "암호"= 유형)이 '진짜'암호 필드를 만들고 하나 '가짜'암호 필드 (유형 = "텍스트"), 밝은 회색 컬러에 가짜 필드의 텍스트를 설정, 두 개의 필드를 만들고 '비밀번호'에 대한 초기 값을 설정. 그런 다음 아래로 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는 (공간 렌더링) 다른 후 하나를 조금 배치되고 필드는 사용자가 입력되면 종료에게 / 이동 나타납니다 때문에 두 개의 입력 요소 사이의 공간을 남겨하지 않도록주의하십시오.


  3. 3.한 걸음 솔루션

    한 걸음 솔루션

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

  4. 4.요즘, 당신은 사용할 수 있습니다

    요즘, 당신은 사용할 수 있습니다

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

    그러나 물론, 당신은 정말 그냥이 작업을 수행해야

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

    IE를 제외한 모든있다. 자리 IE에서 모방이 기능에 거기 심뿐만 아니라이 있습니다.


  5. 5.더 크로스 브라우저 솔루션은 ... 나는이의 요점이 사람을 도움이되기를 바랍니다.

    더 크로스 브라우저 솔루션은 ... 나는이의 요점이 사람을 도움이되기를 바랍니다.

    이 솔루션은 type 속성을 설정하려고 시도하고 실패 할 경우, 단순히 요소 속성 및 이벤트 핸들러를 보존, 새로운 <입력> 요소를 생성합니다.

    changeTypeAttr.js (GitHub의 요점) :

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

  6. 6.이것은 나를 위해 작동합니다.

    이것은 나를 위해 작동합니다.

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

  7. 7.궁극적 인 방법은 jQuery를 사용합니다 :

    궁극적 인 방법은 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");
    

    새로운 입력 필드에 숨겨진 입력 필드의 값 ID 및 마이그레이션.

    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
    

    type 속성을 변경할 수 없습니다처럼 IE에서 오류를 해결하기 위해하는 것은,이 유용는 belows로 찾을 수 있습니다 :

    숨겨진 입력에서 동일한 이벤트를 트리거하기 위해, 새로운 입력 요소에 클릭 / 초점 / 변경 이벤트를 연결합니다.

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

    DOM을 그렇게 새로운 입력 요소에 의해 트리거 이벤트에 반응하는 오래 된 내부 숨겨진 입력 요소가 아직도있다. ID가 교환 될 때, 새로운 입력 요소는 오래된 숨겨진 입력의 ID에 대한 모든 함수 호출에 이전 및 응답처럼 행동하지만, 다른 보이는 것입니다.


  8. 8.당신은) (.prop를 사용하여 시도 적이 있습니까?

    당신은) (.prop를 사용하여 시도 적이 있습니까?

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

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


  9. 9.(나는 아이 패드 사이트에 대한이 필요하기 때문에) 나는 IE에서 테스트하지 않았습니다 - 폼 나는 HTML을 변경할 수 있지만, 내가 JS 추가 할 수 있습니다 :

    (나는 아이 패드 사이트에 대한이 필요하기 때문에) 나는 IE에서 테스트하지 않았습니다 - 폼 나는 HTML을 변경할 수 있지만, 내가 JS 추가 할 수 있습니다 :

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

    (올드 스쿨 JS는 모든 jQuery를 옆에 추한입니다!)

    그러나, MSDN에 대한 링크 http://bugs.jquery.com/ticket/1957 : "마이크로 소프트 인터넷 익스플로러 5 바와 같이, type 속성은 읽기 / 쓰기 한 번, 입력 요소가의 createElement 방법으로 작성됩니다 만 때 이 문서에 추가되기 전에. " 어쩌면 당신은 유형을 변경, 요소를 복제 DOM에 추가하고 이전을 제거 할 수 있을까?


  10. 10.그냥이 보안 것은 우회에 새 필드를 만들 :

    그냥이 보안 것은 우회에 새 필드를 만들 :

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

  11. 11.파이어 폭스 5에서이 작업을 수행하는 동안 나는 같은 오류 메시지를 받았습니다.

    파이어 폭스 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 기능은 jQuery를, 그리고로드됩니다. 이것은 다음 텍스트 필드에 암호 필드를 변경합니다. 분명히 당신은 당신의 암호 필드의 ID에 'password_field_id'을 변경해야합니다.

    사용하고 코드를 수정하여 주시기 바랍니다!

    이것이 내가했던 것과 같은 문제를 가지고 모든 사람을 도움이되기를 바랍니다 :)

    - CJ 켄트

    편집하다: 좋은 해결책하지만 절대 없습니다. FF8과 IE8에서에서 작동하지만 완전히 크롬에 (버전 16.0.912.75). 크롬은 암호 텍스트 페이지가로드 될 때 표시되지 않습니다. 또한 - 자동 완성이 켜져 때 FF 비밀번호를 표시합니다.


  12. 12.모든 브라우저에서 기능을 원하는 모든 사람들을위한 간단한 솔루션 :

    모든 브라우저에서 기능을 원하는 모든 사람들을위한 간단한 솔루션 :

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

  13. 13.이것은 나를 위해 일했다.

    이것은 나를 위해 일했다.

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

  14. 14.유형 속성을 교체하거나 텍스트 입력과 입력을 중첩 제출의 암호 입력 값을 보낼 필요가 변경할 수 없습니다.

    유형 속성을 교체하거나 텍스트 입력과 입력을 중첩 제출의 암호 입력 값을 보낼 필요가 변경할 수 없습니다.


  15. 15.난 당신이 단어 "password"를 포함하는 배경 이미지를 사용하고 .focus의 빈 배경 이미지로 다시 변경있을 것 같아요 ().

    난 당신이 단어 "password"를 포함하는 배경 이미지를 사용하고 .focus의 빈 배경 이미지로 다시 변경있을 것 같아요 ().

    .blur () ----> "비밀번호"와 화상

    .focus () -----> 아니오 "비밀 번호"와 이미지

    또한 일부 CSS와 jQuery를 함께 할 수있다. 암호 필드에 텍스트 필드가 암호 필드의 상단에 정확히 표시 가지고, 숨기기 () 초점에 ()와 초점 ...


  16. 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+'">');
    }); 
    

  17. 17.그것은 그와 더 쉽게 작동합니다 :

    그것은 그와 더 쉽게 작동합니다 :

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

    그리고, 다시 암호 필드에 다시 설정하기 위해 (암호 필드를 가정 텍스트 유형 2 입력 태그입니다) :

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

  18. 18.아주 쉽게이 하나를 사용

    아주 쉽게이 하나를 사용

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

  19. 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'>
    

  20. 20.

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

  21. 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/


  22. 22.간단하게이 :

    간단하게이 :

    this.type = 'password';
    

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

    이것은 당신의 입력 필드가 손 전에 "텍스트"로 설정되어 있다고 가정한다.


  23. 23.다음은 문서에있는 요소의 유형을 변경할 수있는 작은 조각이다.

    다음은 문서에있는 요소의 유형을 변경할 수있는 작은 조각이다.

    jquery.type.js (GitHub의 요점) :

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

    그것은 원래 어디에 다시 넣어 다음, 문서의 입력을 제거 유형을 변경하고하여 문제를 주변에 가져옵니다.

    보장을 무엇에 -이 조각 만 웹킷 브라우저에서 테스트되지 않았 음을 참고!


  24. 24.여기 (비밀번호 입력)을보고 암호 (문자 입력)가 표시되지 토글 패스워드 입력란 옆 화상을 사용하는 방법이다. 나는 "열린 눈 '과'닫힌 눈"이미지를 사용하지만, 당신은 어떤 정장 당신을 사용할 수 있습니다. 작동 방식은 두 개의 입력 / 이미지를 가지고 있으며 이미지를 클릭시 값은 숨겨진에 보이는 입력에서 복사 한 다음 가시성이 교환된다. 하드 코드 된 이름을 사용하는 다른 답변의 많은 달리,이 한 페이지에 여러 번 사용하는 일반적인 충분하다. 또한 자바 스크립트를 사용할 수없는 경우 정상적으로 저하됩니다.

    여기 (비밀번호 입력)을보고 암호 (문자 입력)가 표시되지 토글 패스워드 입력란 옆 화상을 사용하는 방법이다. 나는 "열린 눈 '과'닫힌 눈"이미지를 사용하지만, 당신은 어떤 정장 당신을 사용할 수 있습니다. 작동 방식은 두 개의 입력 / 이미지를 가지고 있으며 이미지를 클릭시 값은 숨겨진에 보이는 입력에서 복사 한 다음 가시성이 교환된다. 하드 코드 된 이름을 사용하는 다른 답변의 많은 달리,이 한 페이지에 여러 번 사용하는 일반적인 충분하다. 또한 자바 스크립트를 사용할 수없는 경우 정상적으로 저하됩니다.

    다음은 페이지와 같은 이러한 모습 어떤이있다. 이 예에서, 암호-A는 자사의 눈을 클릭하여 밝혀졌다.

    $ (문서) .ready (함수 () { $ ( 'img.eye') (보여).; $ ( 'span.pnt').에 (,, 기능을 'IMG'을 '클릭'() { VAR 자체는 $ (이) =; VAR myinp self.prev = (); VAR myspan self.parent = (); VAR mypnt myspan.parent = (); VAR otspan = mypnt.children ()하지 (myspan).; VAR otinp otspan.children = ()) (제.; otinp.val (myinp.val ()); () myspan.hide; otspan.show (); }); }); img.eye { 수직 정렬 : 중간; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    비밀-A <스팬 클래스 = "PNT"> O <스팬 스타일 = "표시 : 없음"> * 암호 B <스팬 클래스 = "PNT"> O <스팬 스타일 = "표시 : 없음"> *


  25. 25.I이 방법과 같이, 입력 요소의 유형을 변경 : old_input.clone ()를 .... 다음은 예이다. 확인란 "id_select_multiple는"이있다. 이 "를 선택"로 변경하는 경우, 이름이 "foo는"을 입력 요소 확인란을 변경해야합니다. 이 체크되지 않은 얻을 경우, 다시 라디오 버튼이 될해야합니다.

    I이 방법과 같이, 입력 요소의 유형을 변경 : old_input.clone ()를 .... 다음은 예이다. 확인란 "id_select_multiple는"이있다. 이 "를 선택"로 변경하는 경우, 이름이 "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();
         });
        }
      )});
    

  26. 26.을 heres DOM 솔루션

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

  27. 27.나는 텍스트와 비밀번호 사이를 전환 할 수있는 jQuery를 확장을 만들었습니다. IE8의 작품 (아마 6 및 7뿐만 아니라,하지만 테스트)와 값 또는 속성을 잃지 않을 것입니다 :

    나는 텍스트와 비밀번호 사이를 전환 할 수있는 jQuery를 확장을 만들었습니다. 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);
            }
        });
    };
    

    매력처럼 작동합니다. 당신은 단순히 $ ( '# 요소')를 호출 할 수 있습니다 togglePassword을 ().; (체크 박스 같은) 다른 일을 기준으로 두 액션 '힘'에 대한 옵션을 제공 전환하려면 : $ ( '# 요소') togglePassword (() '확인'$ checkbox.prop).


  28. 28.그냥 다른 모든 IE8 애호가를위한 옵션, 그리고 최신 브라우저에서 완벽하게 작동합니다. 당신은 입력의 배경과 일치하는 텍스트를 색상 수 있습니다. 당신은 하나의 필드가있는 경우 필드에 / 초점을 클릭하면,이 색상을 검정으로 변경됩니다. 이 '혼동'대부분의 사람들이,하지만 난 단 한 사람이 사용자 암호에 액세스 할 수있는 ADMIN 섹션에서 사용하고 것이기 때문에 나는 공개 사이트에이를 사용하지 않을 것입니다.

    그냥 다른 모든 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
    });
    

  29. 29.난 그냥이 입력의 유형을 변경하려면 다음을했다 :

    난 그냥이 입력의 유형을 변경하려면 다음을했다 :

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

    그것은 작동합니다.

    나는 내가 ASP NET 코어 3.1 프로젝트 'jQuery를 UI의 datepickers을 사용했기 때문에이 작업을 수행 할 필요가 있었다 그들은 크롬 기반 브라우저에서 제대로 작동되지 않았다 (참조 : https://stackoverflow.com/a/61296225/7420301).

  30. from https://stackoverflow.com/questions/1544317/change-type-of-input-field-with-jquery by cc-by-sa and MIT license