Wie eine contentEditable Spanne auf glyphicon klicken

I 2 SpannweitenWie eine contentEditable Spanne auf glyphicon klicken

<span contentEditable=true class="editspan"></span> 
<span class="pencilspan glyphicon glyphicon-pencil pull-right"></span>

und eine js Funktion markieren

$(document).on('click', '.pencilspan', function() { 
    console.log("clicked pencil"); 
});

Was ich will, wenn ich pencilspan der contentEditable Bereich von editspan erhalten sollten klicken hervorgehoben (Eingabefeld sollte sichtbar sein). Wie kann ich das erreichen?

Quelle

2016-04-15 aaj

Werfen Sie einen Blick auf die Funktion addClass jQuery. – Astaroth

zeigen Sie den HTML-Code, wo Sie Eingabe verwendet –

Ich möchte nicht das Eingabe-Tag verwenden, um ein Eingabefeld zu Editspan hinzufügen. Ich habe bereits das contentEditable = true-Flag, das mir automatisch ein Eingabefeld gibt. Ich möchte nur die contentEditable Areaa hervorheben oder einen Klick auf den Bearbeitungsbereich erzwingen. Ich habe versucht, '$ ('. Editspan'). Click(); 'innerhalb meiner Pencilspan onlick Funktion, aber es hat nicht funktioniert. – aaj

Sie sollten focus() Methode versuchen:

$(document).on('click', '.pencilspan', function() { 
    $(this).siblings('.editspan').focus(); 
});

Für leere Spanne Ausgabe können Sie folgen dieser link

Quelle

2016-04-15 06:49:52 rajthakur

Ich möchte das Eingabe-Tag nicht verwenden, um ein Eingabefeld für Editspan hinzuzufügen. Ich habe bereits das contentEditable = true-Flag, das mir automatisch ein Eingabefeld gibt. Ich möchte nur die contentEditable Areaa hervorheben oder einen Klick auf den Bearbeitungsbereich erzwingen. Ich habe versucht, '$ ('. Editspan'). Click(); 'innerhalb meiner Pencilspan onlick Funktion, aber es hat nicht funktioniert. – aaj

überprüfen Sie die bearbeitete Antwort .. – rajthakur

Vielen Dank! Dies ist fast funktioniert das einzige Problem ist, wenn ich keinen Text innerhalb der Spannweite dies funktioniert nicht und wenn ich etwas innerhalb der Spannweite habe funktioniert es. ' Text' funktioniert aber '' funktioniert nicht – aaj

Bitte versuchen Sie dies könnte Ihnen helfen, wenn Sie für Toggle suchen:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.editInput{ 
display:none; 
} 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

</head> 
<body> 
<span contentEditable=true class="editspan"> 
<input type = 'text' value ='' class='editInput' /> 
</span> 
<span class="pencilspan glyphicon glyphicon-pencil pull-right">button</span> 
<script> 
$(document).ready(function(){ 
    $(document).on('click', '.pencilspan', function() { 
    // var editInput = "<input type = 'text' value ='' />"; 
    $('.editspan .editInput').toggle(); 

}); 
}); 
</script> 
</body> 
</html>

Quelle

2016-04-15 06:53:25

Ich möchte das Eingabe-Tag nicht verwenden, um ein Eingabefeld für editspan hinzuzufügen. Ich habe bereits das contentEditable = true-Flag, das mir automatisch ein Eingabefeld gibt. Ich möchte nur die contentEditable Areaa hervorheben oder einen Klick auf den Bearbeitungsbereich erzwingen. Ich habe versucht, '$ ('. Editspan'). Click(); 'innerhalb meiner Pencilspan onlick Funktion, aber es hat nicht funktioniert. – aaj

@lovesoftlayeraj: bitte versuchen Sie dieses $ (document) .auf ('klicken', '.pencilspan', function() { $() konzentrieren(); 'editspan Eingang.'.}); –

Wie eine contentEditable Spanne auf glyphicon klicken

Antwort

Verwandte Themen