jQueryではinputのtypeの変更ができないのでgetを使って対処した

2014年03月21日

<input type="password" id="target">
<button id="button">Change!</button>

1 2	<input type="password" id="target"> <button id="button">Change!</button>

buttonを押すとinputのパスワードの伏字を解除するボタンをjQueryで作ろうとします。

<script type="text/javascript">
$("#button").on({
    'click': function() {
        $('#target').attr('type', 'text');
    }
});
</script>

$("#button").on({

'click': function() {

$('#target').attr('type', 'text');

}

});

</script>

としてみたのですが以下のようなエラーが表示されました。

Uncaught Error: type property can't be changed

1	Uncaught Error: type property can't be changed

jQueryではinputのtypeの変更は出来ないようです。

そこで、処理の部分だけjQueryを使わずに書きます。

<script type="text/javascript">
$("#button").on({
    'click': function() {
        $('#target').get(0).type = 'text';
    }
});
</script>

$("#button").on({

'click': function() {

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

}

});

</script>

↓のようにinputのtypeをtextに変更することが出来ました。

ナカシマ