Click Box ein/Aus

[portseven]

Tag,

Wollte das, wenn ich bei einer Textarea drauf klicke, ein Button erscheint "Senden". Sollte man die Textarea verlassen sollte der Button wieder verschwinden.

Wenn ich die Funktion .Hover nutze funktioniert das Script, aber bei Click und Keypress funktioniert es nicht.

Hab jetzt das Beispiel Keypress genommen.

<textarea class="send_comment send_comment-<?= $rowsafe['beichtid']; ?>" id="send_comment_by_id" data-id="<?= $rowsafe['beichtid']; ?>"></textarea>

<div class="btns btns-<?= $rowsafe['beichtid']; ?>" style="display:none;">
		<button type="submit" class="commentbtn" value="<?= $rowsafe['beichtid']; ?>">
</div>

	$('.send_comment').keypress(function() {
		var value = $(this).attr('data-id');
		
		$('.btns-'+value+'').show();

	},function() {

    var value = $(this).attr('data-id');
		
		$('.btns-'+value+'').hide();

  })

[Auge]

Hallo

Wollte das, wenn ich bei einer Textarea drauf klicke, ein Button erscheint "Senden". Sollte man die Textarea verlassen sollte der Button wieder verschwinden.

Dir ist klar, dass man, um den Button zu drücken, die Textarea verlassen muss? Keine Ahnung, ob das drücken des Buttons zeitlich dem Event für das Verlassen des Textareas vorausgeht, wenn der Fokus bis zum drücken im der Textarea liegt, wenn aber nicht, ist der Button definitiv nicht benutzbar. Und selbst wenn das funktioniert, halte ich das für ein unerwartetes Verhalten, das man dem Benutzer nicht zumuten sollte.

Tschö, Auge

[Gunnar Bittersmann]

@@portseven

Wollte das, wenn ich bei einer Textarea drauf klicke, ein Button erscheint "Senden". Sollte man die Textarea verlassen sollte der Button wieder verschwinden.

Ich weiß nicht, warum der Button nicht immer angezeigt werden sollte.

Aber wenn solch ein Effekt, dann nicht mit JavaScript! Das ist ein Einzeiler in CSS:

form:not(:focus-within) button
{
	opacity: 0;
}

Den Button nicht mit display: none oder visibility: hidden aus dem accessibility tree nehmen, sondern nur visuell verstecken!

In Browsern, die :focus-within noch nicht unterstützen, bleibt der Button halt immer sichtbar. Oder einen Polyfill verwenden.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

In Browsern, die :focus-within noch nicht unterstützen, bleibt der Button halt immer sichtbar. Oder einen Polyfill verwenden.

Wenn textarea und button Geschwister sind, dann tut es auch dieser Einzeiler:

textarea:not(:focus) + button:not(:focus)
{
	opacity: 0;
}

LLAP 🖖