Listen for input change programmatically

April 25, 2024 —

— By

This post will show up on its own!

Example

<div class="accordion">
    <div class="item">
        <div class="title">123</div>
        <div class="content">333</div>
    </div>
</div>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

let event = new Event('change');
let inputBox = document.querySelector(".input"); // <-- put proper selector here

const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(inputBox), 'value');

Object.defineProperty(inputBox, 'value', {
    set: function(t) {
        if(t === '') return;
        return descriptor.set.apply(this, arguments);
    },
    get: function() {
        return descriptor.get.apply(this);
    }
});

GitHub Gist

.gradient-border {
  --border-width: 3px;

  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 200px;
  font-size: 2.5rem;
  text-transform: uppercase;
  color: white;
  background: #222;
  border-radius: var(--border-width);

  &::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
    animation: moveGradient 4s alternate infinite;
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}