jQuery를 사용하여 입력 필드 유형 변경

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

이 조치는 브라우저 보안 모델의 일부로 방지 될 수 있습니다.

편집 : 실제로, Safari에서 지금 테스트하면 오류가 발생 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 소스에서 직접, 이것은 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";

훨씬 더 쉽습니다 ... 모든 동적 요소 생성이 필요하지 않습니다. 하나는 '실제'비밀번호 필드 (type = "password")와 하나는 '가짜'비밀번호 필드 (type = "text")로 두 개의 별도 필드를 만들어 가짜 필드의 텍스트를 밝은 회색으로 설정하고 초기 값을 '비밀번호'로 설정합니다. 그런 다음 아래와 같이 jQuery를 사용하여 몇 줄의 Javascript를 추가하십시오.

    <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는 두 입력 요소 사이에 공백을 두지 않도록주의하십시오. IE는 공백을 렌더링하고 공백을 렌더링합니다. 사용자가 입력 / 종료하면 필드가 움직이는 것처럼 보입니다.

원스텝 솔루션

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

요즘에는 사용할 수 있습니다

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

그러나 물론, 당신은 정말로 이것을해야합니다

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

IE 이외의 모든 것. IE의 해당 기능을 모방하기 위해 자리 표시 자 shim이 있습니다.

더 많은 브라우저 간 솔루션 ... 이것의 요점이 누군가를 도울 수 있기를 바랍니다.

이 솔루션은 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'));

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

JavaScript로 새 입력 필드를 즉석에서 생성하십시오.

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

와 같은 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...

오래된 숨겨진 입력 요소는 여전히 DOM 안에 있으므로 새 입력 요소에 의해 트리거되는 이벤트와 반응합니다. ID가 바뀌면 새로운 입력 요소는 이전 입력 요소처럼 작동하고 이전 숨겨진 입력 ID에 대한 함수 호출에 응답하지만 다르게 보입니다.

조금 까다 롭지 만 작동합니다! ;-)

.prop ()를 사용해 보셨습니까?

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

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

IE에서 테스트하지 않았습니다 (iPad 사이트 에이 기능이 필요했기 때문에) .HTML을 변경할 수 없지만 JS를 추가 할 수있는 양식 :

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

(오래된 학교 JS는 모든 jQuery 옆에 추악합니다!)

그러나 http://bugs.jquery.com/ticket/1957 은 MSDN에 연결됩니다. "Microsoft Internet Explorer 5에서 type 속성은 읽기 / 쓰기 한 번이지만 createElement 메서드를 사용하여 입력 요소를 만든 경우에만 문서에 추가되기 전에 따라서 요소를 복제하고 유형을 변경하고 DOM에 추가하고 이전 요소를 제거 할 수 있습니까?

이 보안 항목을 무시하려면 새 필드를 작성하십시오.

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

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

나는 이것을 사용자 이름 필드에도 사용하므로 기본값을 토글합니다. 호출 할 때 함수의 두 번째 매개 변수를 ''로 설정하십시오.

또한 사용자가 자바 스크립트를 활성화하지 않았거나 문제가 발생하면 비밀번호가 여전히 보호되는 경우를 대비하여 내 비밀번호 필드의 기본 유형이 실제로 비밀번호라는 점에 주목할 가치가 있습니다.

$ (document) .ready 함수는 jQuery이며 문서로드가 완료되면로드됩니다. 그런 다음 암호 필드를 텍스트 필드로 변경합니다. 분명히 'password_field_id'를 비밀번호 필드의 ID로 변경해야합니다.

코드를 자유롭게 사용하고 수정하십시오!

이것이 내가 한 것과 같은 문제가있는 모든 사람들에게 도움이되기를 바랍니다. :)

-CJ 켄트

편집 : 좋은 해결책이지만 절대는 아닙니다. FF8 및 IE8에서 작동하지만 Chrome에서는 완전히 작동하지 않습니다 (16.0.912.75 ver). 페이지가로드 될 때 Chrome에 비밀번호 텍스트가 표시되지 않습니다 . 또한-자동 완성이 켜져 있으면 FF에 비밀번호가 표시됩니다.

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

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

이것은 나를 위해 일했습니다.

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

유형 특성은 변경할 수 없으며 입력을 텍스트 입력으로 바꾸거나 오버레이하고 제출시 비밀번호 입력으로 값을 보내야합니다.

"password"라는 단어가 포함 된 배경 이미지를 사용하여의 빈 배경 이미지로 다시 변경할 수 .focus()있습니다.

.blur() ----> "암호"가있는 이미지

.focus() "암호"가없는 -----> 이미지

CSS와 jQuery로도 할 수 있습니다. 텍스트 필드가 비밀번호 필드 위에 정확하게 표시되도록하고 hide ()는 focus ()에 있고 비밀번호 필드에 초점을 둡니다.

이 데모를 보십시오
여기에

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

암호 필드로 다시 돌아가려면 ( 암호 필드가 텍스트 유형의 두 번째 입력 태그라고 가정 ) :

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

이것을 사용하면 매우 쉽습니다

<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 다음 원래 위치로 되돌려 놓아 .

이 스 니펫은 WebKit 브라우저에 대해서만 테스트되었으며 다른 사항은 보증하지 않습니다!

다음은 비밀번호 필드 옆에 이미지를 사용하여 비밀번호 확인 (텍스트 입력)과 보이지 않는 (암호 입력) 간을 전환하는 방법입니다. 나는 "오픈 아이"와 "닫힌 아이"이미지를 사용하지만 자신에게 맞는 것을 사용할 수 있습니다. 작동 방식은 두 개의 입력 / 이미지가 있고 이미지를 클릭하면 표시되는 입력에서 숨겨진 입력으로 값이 복사 된 다음 가시성이 교체됩니다. 하드 코드 된 이름을 사용하는 다른 많은 답변과 달리이 답변은 한 페이지에서 여러 번 사용할 수있을 정도로 일반적입니다. JavaScript를 사용할 수없는 경우에도 정상적으로 저하됩니다.

다음은이 두 페이지의 모습입니다. 이 예에서, 비밀번호 -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"확인란이 있습니다. 이것이 "선택됨"으로 변경되면, 이름이 "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();
     });
    }
  )});

여기 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;

텍스트와 비밀번호를 전환하는 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);
        }
    });
};

매력처럼 작동합니다. 간단히 전화 $('#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를 가진 여러 필드를 확인한 경우 텍스트를 숨기려는 필드에 'pass'클래스를 추가하십시오. 비밀번호 입력란 유형은 'text'입니다. 이 방법으로 'pass'클래스가있는 필드 만 변경됩니다.

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

입력 유형을 변경하기 위해 다음을 수행했습니다.

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

작동합니다.

ASP NET Core 3.1 프로젝트에서 jQuery UI datepickers를 사용하고 Chromium 기반 브라우저에서 제대로 작동하지 않기 때문에이 작업을 수행해야했습니다 ( https://stackoverflow.com/a/61296225/7420301 참조 ).