web-dev-qa-db-ja.com

JSによってHTML入力タイプを変更しますか？

タグ自体を介してこれを行う方法は、タイプをテキストからパスワードに変更します

<input type='text' name='pass'  />

Type = 'text'をtype = 'password'に変更するために、入力タグ自体にJSを挿入することは可能ですか？

javascripthtmlinput
30
user1150271

試してください：

<input id="hybrid" type="text" name="password" />

<script type="text/javascript">
    document.getElementById('hybrid').type = 'password';
</script>
24
deed02392

<input type=password>のtypeを変更すると、一部のブラウザーでセキュリティエラーがスローされます（古いIEおよびFirefoxバージョン）。

新しいinput要素を作成し、そのtypeを必要なものに設定し、他のすべてのプロパティを既存のものから複製する必要があります。

JQueryプレースホルダープラグインでこれを行います： https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js#L80-84

Internet Explorerで作業するには：

  • 新しい要素を動的に作成します
  • 古い要素のプロパティを新しい要素にコピーします
  • 新しい要素のタイプを新しいタイプに設定します
  • 古い要素を新しい要素に置き換えます

以下の機能は、上記のタスクを実行します。

<script>
function changeInputType(oldObject, oType) {
    var newObject = document.createElement('input');
    newObject.type = oType;
    if(oldObject.size) newObject.size = oldObject.size;
    if(oldObject.value) newObject.value = oldObject.value;
    if(oldObject.name) newObject.name = oldObject.name;
    if(oldObject.id) newObject.id = oldObject.id;
    if(oldObject.className) newObject.className = oldObject.className;
    oldObject.parentNode.replaceChild(newObject,oldObject);
    return newObject;
}
</script>
11
Mathias Bynens

ここに私が持っているものがあります。

基本的に、タグ内のonfocusおよびonblurコマンドを使用して、適切なjavascriptをトリガーします。それは次のように簡単かもしれません：

<span><input name="login_text_password" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="this.select(); this.setAttribute('type','text');" /></span>

この基本機能の進化版は、空の文字列をチェックして空の文字列をチェックし、ヌルテキストボックスのイベントで元の「パスワード」にパスワード入力を返します。

    <script type="text/javascript">
        function password_set_attribute() {
            if (document.getElementsByName("login_text_password")[0].value.replace(/\s+/g, ' ') == "" || document.getElementsByName[0].value == null) {
                document.getElementsByName("login_text_password")[0].setAttribute('type','text')
                document.getElementsByName("login_text_password")[0].value = 'Password';
            }
            else {
                document.getElementsByName("login_text_password")[0].setAttribute('type','password')
            }
        }
    </script>

HTMLは次のようになります。

<span><input name="login_text_password" class="roundCorners" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="password_set_attribute();" /></span>
3
Sventek
$(".show-pass").click(function (e) {
    e.preventDefault();
    var type = $("#signupform-password").attr('type');
    switch (type) {
        case 'password':
        {
            $("#signupform-password").attr('type', 'text');
            return;
        }
        case 'text':
        {
            $("#signupform-password").attr('type', 'password');
            return;
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="password" class="show-pass">
0
user10232651

これは一部のブラウザではサポートされていません（覚えている場合はIEです）が、他のブラウザでは機能します。

document.getElementById("password-field").attributes["type"] = "password";

または

document.getElementById("password-field").attributes["type"] = "text";
0
Evert

Evertのコードの最後に「.value」を追加して機能させる必要がありました。

また、ブラウザのチェックと組み合わせて、入力type = "number"フィールドがChromeでtype = "text"に変更されるようになりました。「formnovalidate」は現在機能していないようです。

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
    document.getElementById("input_id").attributes["type"].value = "text";
0
squarcle
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
function changefield(){
    document.getElementById("passwordbox").innerHTML = "<input id=\"passwordfield\" type=\"password\" name=\"password-field\" title=\"Password\" tabindex=\"2\" />";
    document.getElementById("password-field".focus();
}
</script>
</head>

<body>
<div id="passwordbox">
<input id="password-field" type="text" name="password-field" title="Password"onfocus="changefield();" value="Password" tabindex="2" />
</div>
<input type="submit" name="submit" value="sign in" tabindex="3" />

</body>
</html>
0
Karan Shah

はい、イベントをトリガーして変更することもできます

<input type='text' name='pass'  onclick="(this.type='password')" />
0
Srinath