Javascript/CSS: Schaltfläche in ein Textfeld bei Klick ändern?

Question

Ich habe eine Schaltfläche, die ich in ein Textfeld ändern muss (idealerweise erweitern Sie es mit einer Animation), wenn Sie darauf klicken. Im Moment habe ich meine Taste und Textfeld nebeneinander auf der Seite:

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>'; 

ich das Passwort zu versteckt am Anfang gesetzt, aber ich muß wissen, wie die change Taste „werden“ zu machen oder zu erweitern, in denen Passwort Textfeld entweder mit CSS oder Javascript. Ich bin neu bei Javascript und bin mir nicht sicher, wie man das mit einem Klick erreicht.

Wie kann ich eine Schaltfläche in ein Textfeld bei Klick ändern? Ich muss in der Lage sein, wieder auf die Taste danach

diese

Ich bin immer zu ändern: das

mit:

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>'; 

Und

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

Selbst wenn ich nehmen es aus dem Wrapper ganz Ihre Farben kommen nicht durch. Warum passiert dies?

Answer 1

Setzen Sie sowohl Ihre Schaltfläche als auch Ihr Eingabefeld in dasselbe div und überlappen Sie sie dann mit dem Positionierungstrick mit relative und absolute. Verwenden Sie dann JQuery, um es beim Ausblenden der Elemente hübsch aussehen zu lassen.

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

Sie können echo sowohl die Schaltfläche und Textfeld, und stellen Sie sicher, dass das Feld standardmäßig ausgeblendet ist - echo '<div id="button" style="display:hidden"></div>';. Dann, mit Javascript verstecken Sie die Schaltfläche und zeigen Sie das Textfeld an, wenn Sie auf die Schaltfläche klicken.

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

Eine Animation kann durch Änderung field.style.width mit Javascript, oder mit CSS-Animationen erfolgen.

Answer 3

Wenn Sie jQuery verwenden, Sie könnte es tun mit .replaceWith

Zum Beispiel:

index.html

<button>To input</button> 

script.js

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

Ergebnis: https://jsfiddle.net/sws5m4cc/

Answer 4

Wie die anderen Antworten nahelegen, können einige jquery das ganz einfach tun, aber auch über Javascript. Ich ging die jquery Route mit der Sichtbarkeit in diesem jsfiddle spielen:

js

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

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

css:

.hideable{ 
    position: absolute; 
    opacity: 1; 
    transition: visibility .35s, opacity .5s linear; 
} 

.hidden{ 
    visibility: hidden; 
    opacity: 0; 
} 

die Geige umfasst sowohl JavaScript-Methode und jquery Methoden https://jsfiddle.net/youkgd2q/4/

Answer 5

A Gute Praxis ist es, das Verhalten (Funktionalität) von der Struktur der Seite (HTML-Dokument) und der Präsentation (CSS/Stil).

Ich würde einige Klassen (show/hide) in CSS erstellen und diese Klassen verwenden, um bestimmte Änderungen im DOM vorzunehmen, und auf diese Weise könnte ich leichter mögliche Fehler finden. Eine andere Möglichkeit wäre, eine Bibliothek wie jQuery zu verwenden und deren Funktionen zu verwenden, beispielsweise toggle oder show und 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

Prost!