CODEWITHSUNDEEP
reactjsreact-component
Samben Jerald
Samben Jerald

Reputation: 117

Unable to limit the maxlength and minlength for input type number

JSX:

    const input = (props) => {
  return (
    <div>
      <span className="input-icon">{props.icon}</span>
      <input
        type={props.type || "number"}
        className={props.inputClassName || "main-input"}
        {...props.attributes}
      />
    </div>
  );
};
CSS:
.main-input {
  width: 100%;
  height: 2rem;
  padding: 4px 5px 4px 0;
  border: none;
  caret-color: hsl(183, 100%, 15%);
  outline: none;
  color:hsl(183, 100%, 15%);
  font-weight: bolder;
  font-family: inherit;
  font-size: 1.1rem;
}
.main-input:focus {
  border-bottom: hsl(184, 14%, 56%) solid 1.5px;
}

.main-input::-webkit-outer-spin-button,
.main-input::-webkit-inner-spin-button {
  -webkit-appearance: none; 
}
.main-input[type="number"] {
  -moz-appearance: textfield;
  text-align: right;
}
.input-icon {
  position: absolute;
  padding: 5px 0 0 10px;
  font-weight: bolder;
}

.card-label{
    font-size: 10px;
    color: hsl(186, 14%, 43%);
}

My Design

I have changed the number type input and removed the counter using the appearance CSS property. But now I'm trying to limit(maxlength) to 5 and minlength to 1 and also minus(As shown in the image) values are not allowed. Please comment if anyone knows a solution or please comment with any suggestions.

Upvotes: 0

Views: 618

Answers (1)

Uros
Uros

Reputation: 323

add onChange callback to input, and prevent adding anything inside input which is not number.

Upvotes: 1

Related Questions