Ich habe diesen Code:

<button id="btn1"> Name of button <span> 1 </span> </button>

Ich möchte den Text der Schaltfläche ("Name der Schaltfläche") durch Klicken auf das Textfeldelement ersetzen

<button id="btn1"> <input type='text' value='Name of button'/> <span> 1 </span> </button>

Ich möchte also den Indextext der Schaltfläche erhalten, um ihn zu ersetzen.

0
nắng huế yêu gái huế 6 Aug. 2015 im 10:42

2 Antworten

Beste Antwort

Obwohl es nicht den HTML-Standards entspricht, funktioniert das Folgende in Google Chrome

$('#btn1').click(function(event) {
  event.preventDefault();
  if ($(this).find("input").length == 0) {
    var span = $(this).find("span").detach();
    var buttonText = $(this).text();
    $(this).empty().append("<input type='text' value='" + buttonText + "'/>");
    $(this).append(span);
    $(this).find("input").focus();
  }
});

$('#btn1').on("blur", "input", function() {
  $(this).replaceWith($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" class="editable">Name of button<span> 1 </span> 
</button>

Ich habe auch ein kleines Extra hinzugefügt, um den Wert aus dem Textfeld wieder in die Beschriftung der Schaltfläche einzufügen, da es für mich so aussieht, als ob Sie dies erreichen möchten.

0
John C 6 Aug. 2015 im 08:52

Mach einfach:

document.querySelector('#btn1').innerHTML
  .replace('Name of button', '<input type="text" value="Name of button" />');
<button id="btn1">Name of button <span> 1 </span> 
</button>

Wenn die Antwort Ihren Anforderungen nicht entspricht, kommentieren Sie sie und ich werde sie aktualisieren.

0
iplus26 6 Aug. 2015 im 07:55