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

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

---

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

---

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

---

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

$('#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다음 원래 위치로 되돌려 놓아 문제를 해결합니다 .

이 스 니펫은 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
});

참고 URL : https://stackoverflow.com/questions/1544317/change-type-of-input-field-with-jquery