Javascript/CSS：ボタンをクリックしたときのテキストフィールドに変更しますか？

Question

私は、クリックすると、テキストフィールドに変更する必要があるボタンがあります（アニメーションを使ってそれに展開するのが理想的です）。今、私は、ページ上で互いに横に私のボタンやテキストフィールドを持っている：

echo '<form id= "changePassForm" action="" method="post" enctype="multipart/form-data">'; 
echo '<div class="changePass">Change Password</div>'; 
echo '<div class="changePassBtn" method="post"></div>'; 
echo '<input type="password" placeholder="Password" name="password">'; 
echo '</form>'; 

私は開始時に隠さにパスワードを設定することができますが、私はchangePassボタンを作成する方法を知っておく必要がある「となって」またはに展開しますパスワードのテキストフィールドは、CSSまたはJavaScriptを使用しています。 私はJavaScriptを使い慣れていないので、ボタンクリックでこれを達成する方法がわかりません。

ボタンをクリックしてテキストフィールドに変更するにはどうすればよいですか？私が取る場合でも

echo '<form id="changePassForm" action="" method="post" enctype="multipart/form-data"> 
    <div class="changePass"> 
    <div class="changePassBtn">Change Password</div> 
    <input type="password" placeholder="Password" name="password"> 
    </div>'; 

そして

.wrapper { 
     background: #50a3a2; 
     background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%); 
     background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%); 
     position: absolute; 
     top: 0%; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     margin-top: 0px; 
     overflow: scroll; 
     z-index: -1; 
     text-align: center; 
    } 
.changePass { 
    position: relative; 
    width: 200px; 
    height: 1px; 
} 

.changePass input { 
    position: absolute; 
    padding: 5px; 
    display: none; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 

} 

.changePass, .changePassBtn { 
    background: #2d89ef; 
    border-bottom: 2px solid #2b5797; 
    color: white; 
    padding: 4px; 
    display: inline; 
    border-radius: 2px; 
    position: absolute; 
    overflow: hidden; 
    white-space: nowrap; 
    text-align: center; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    width: 120px; 
} 

.changePass, .changePassBtn:hover { 
    background: #2b5797; 
    border-top: 2px solid #2d89ef; 
    border-bottom: 0; 
} 

：これで

：私はこれを取得してい

その後バックボタンに変更できるようにする必要がありますそれはあなたの色が完全に来ていないラッパーからそれを完全に。なぜこうなった？

Answer 1

ボタンと入力フィールドを同じdivに入れて、relativeとabsoluteという位置付けトリックを使用して重複させます。次に、JQueryを使用して、要素を非表示にするときにかなり見えるようにします。

JSFiddle：https://jsfiddle.net/wpbL3kjx/9/

//Shows Input Box When Focussed 
 
$(".changePassBtn").click(function() { 
 
    var neww = $(".changePass input").css("width"); 
 
    $(this).animate({ 
 
    width: neww 
 
    }, 300, function() { 
 
    $(".changePass input").fadeIn(300, function() { 
 
     $(".changePassBtn").hide(); 
 
    }).focus(); 
 
    }); 
 
}); 
 

 
//Shows Button When Unfocussed 
 
$(".changePass input").blur(function() { 
 
    $(".changePassBtn").css("width", "auto"); 
 
    var neww = $(".changePassBtn").css("width"); 
 
    $(this).animate({ 
 
    width: neww 
 
    }, 300, function() { 
 
    $(".changePassBtn").show(0, function() { 
 
     $(".changePass input").fadeOut(500, function() { 
 
     $(".changePass input").css("width", "auto"); 
 
     }); 
 
    }); 
 
    }); 
 
});

.changePass { 
 
    position: relative; 
 
} 
 
.changePass input { 
 
    position: absolute; 
 
    padding: 5px; 
 
    display: none; 
 
} 
 
.changePass .changePassBtn { 
 
    background: #2d89ef; 
 
    border-bottom: 2px solid #2b5797; 
 
    color: white; 
 
    padding: 4px; 
 
    display: inline; 
 
    border-radius: 2px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 
.changePass .changePassBtn:hover { 
 
    background: #2b5797; 
 
    border-top: 2px solid #2d89ef; 
 
    border-bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="changePassForm" action="" method="post" enctype="multipart/form-data"> 
 
    <div class="changePass"> 
 
    <div class="changePassBtn">Change Password</div> 
 
    <input type="password" placeholder="Password" name="password"> 
 
    </div> 
 
</form>

Answer 2

ボタンとテキストフィールドの両方でechoを使用し、フィールドがデフォルトで非表示になっていることを確認してください。echo '<div id="button" style="display:hidden"></div>';次に、javascriptを使用してボタンを非表示にして、ボタンをクリックするとテキストフィールドを表示します。

button = document.getElementById('theButtonID'); 
field = document.getElementById('theFieldID'); 
button.onclick = function(){ 
    button.style.display = 'hidden'; 
    field.style.display = ''; 
} 

アニメーションはJavaScriptでfield.style.widthを変更する、またはCSSアニメーションを使用することによって行うことができます。

Answer 3

あなたはjQueryのを使用する場合は、例えば.replaceWith

でそれを行うことができます：

index.htmlを

<button>To input</button> 

script.js

$(document).ready(function(){ 
    $("button").click(function(){ 
     $(this).replaceWith('<input type="text"/>') 
    }); 
}); 

結果：https://jsfiddle.net/sws5m4cc/

Answer 4

他の回答からもわかるように、jqueryはこれを非常に簡単に行うことができますが、javascriptで行うこともできます。

JS

$('button').on("click",function(){ 
    $('.hideable').toggleClass('hidden'); 
}); 

$('input').on("blur", function(){ 
    $('.hideable').toggleClass('hidden'); 
}); 

CSS：

​​3210

フィドルが含まれて両方のjavascriptの方法とjqueryのメソッド https://jsfiddle.net/youkgd2q/4/

Answer 5

A私はこのjsfiddleでの視認性で遊んでjqueryのルートを行ってきました良い習慣は、ページの構造（HTMLドキュメント）から分離された動作（機能）を持つことです。プレゼンテーション（CSS /スタイル）。

私はCSSでいくつかのクラス（表示/非表示）を作成し、DOMで特定の変更を加えるためにそのクラスを使用します。これにより、より簡単な最終バグを見つけることができます。

もう1つの方法は、jQueryのようなライブラリを使用して、たとえばtoggleまたはshowとhideのような関数を使用することです。

<input type="text" name="user" placeholder="username"/> 
<input type="text" name="password" placeholder="password"/> 

<input type="text" id="other" class="hideThis" name="other" placeholder="please fill this too.."/> 
<button id="btn" class="showThis">submit</button> 

---

.hideThis { 
    display: none; 
} 

.showThis { 
    display: block; 
} 

---

var button = document.getElementById('btn'); 
button.onclick = function(){ 
    button.className = "hideThis"; 
    document.getElementById('other').className = 'showThis'; 
} 

jsFiddle

乾杯！