Beste Input Field Animation beim Löschen! Lerne JavaScript & CSS [DE/Tutorial]

[@GGGGGGGGGG96]

Halli-Hallo! Ich habe das tatsächlich bei einem großen Projekt in einem Input-Feld eingesetzt, wo man ein Gutschein-Code eingeben kann. Es kam sehr gut an, vielen dafür! Zwei sehr kleine Tweaks habe ich gemacht: 1. Mit "e.target.selectionStart;" bekommt man die Position der Cursors, das kann man sowohl beim "last-char" als auch im "Canvas-measureText" benutzen (satt -1), dann funktioniert das auch , wenn der Cursor im Input-Feld sich nicht in der Mitte befindet. 2. Die Berechnung der Text-Weite (also Canvas-measureText) kann auch in den if-Block im "isBackspaceKey()-Check" verschoben werden, dann muss nicht unnötig immer die Breite berechnet werden. Das waren auch schon meine Änderungen. Und noch mal vielen Dank für diese tolle Idee! :)

[@PicSta]

Sehr witziges Tutorial. So etwas habe ich noch nie vorher gesehen und ich mag solche kleinen Effekte. Ob sich jetzt der Aufwand dafür gelohnt hat, sei mal dahin gestellt. Der Mülleimer schluckt auch Leerzeichen, das müsste man eigentlich dem noch abgewöhnen. Das mit der Entf-Taste wäre noch eine nette Ergänzung gewesen. Keine Ahnung, ob ich das wirklich da rein gebastelt bekomme ...

[@UnleashedDesign]

Hallo, danke freut mich wenn es dir gefällt und einfach mal versuchen :) bin gespannt was dabei raus kommt

[@PicSta]

@@UnleashedDesign bin ich der einzige, der ein Kommentar geschrieben hat? Oder spinnt mein YT? Ich bin nicht mal Ansatzweise so gut in JS, wie du Johannes. Wenn man es liest und verfolgt klingt es immer logisch, aber wenn man selbst mal etwas schreiben möchte, fängt es bei mir wie mit einer dicken Blockade an.

[@Woofultimate]

@PicSta , ja Du warst bis jetzt der einzige :-D. @Unleashed Design , ich finde es cool was Du uns da immer zeigst. Ich persönlich würde es nur in eine Demo-Webseite einbauen, aber der Kunde muss dann selbst entscheiden ob dies so für Ihn passt. Also einfach in dein Produktiv-System einbauen geht bei mir nicht so. Nette Grüße Mario

[@UnleashedDesign]

Hmmm warum geht es bei dir nicht? Also sollte eigentlich ohne Probleme Funktionieren. Läuft bei dir den die Demo?

[@Woofultimate]

@@UnleashedDesign achso da hab ich mich wahrscheinlich falsch ausgedrückt, das Funktioniert schon überall, nur ich kann es nicht einfach beim Kunden einbauen. Kann ja sein das der Kunde es nicht gut findet 😄