Input field

by brunomuller

HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&display=swap" rel="stylesheet">

<div class="wrapper">
	<input id="tokenAmt" class="amount-input"  maxlength="26" value="0">
	<div  class="token-name">
  USDC
  </div>
  
  <div class="wrapper-2">
    <input class="input-field" placeholder="Example">
  </div>
  
</div>

SCSS

$white: #FFF;
$light-gray: #A5A6AA;
$dark-gray: #1F212A;

body {
	padding: 20px;
}
.wrapper {
	width: 360px;
	margin: 0 auto;
	text-align: center;
	padding: 100px 20px;
	position: relative;
  background: $dark-gray;
  height: 300px;
  border-radius: 5px;
  box-shadow: #A5AABF 0px 10px 10px;
}

.amount-input {
  border: none;
  opacity: .6;
  background-color: transparent;
	vertical-align: top;
	text-align: center;
	outline: none;
  width: 100%;
  font-size: 40px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: $white;
  display: inline-block;
  transition: opacity  .15s ease-in-out;

  &.med {
    font-size: 30px;
  }
  &.small {
    font-size: 25px;
  }
    
    &:hover, &:focus {
       opacity: 1;
    }
}

.token-name {
  font-size: 20px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: $light-gray;
  padding-top: 5px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}



.input-field {
  margin-top: 100px;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 400;
  color: #fff;
  border-radius: 8px;
  border: none;
  background-color: transparent;
  min-width: 0;
  border: 1px solid #303448;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  font-family: 'IBM Plex Sans', sans-serif;



  &:hover {
    border: 1px solid $light-gray;
  }
  
  &:focus {
    border: 1px solid #5332e6;
    box-shadow: 0 0 0 0.2rem rgba(83, 50, 230, 0.3)
  }
}

JavaScript

var tokenAmt = document.getElementById("tokenAmt");

function setDefaultValue() {
	tokenAmt.addEventListener('input', function(e) {
		if (this.value.length < 1) {
			this.value = 0;
      setFontSize();
		}
	}, false);
}

function handleInputValues() {
	tokenAmt.addEventListener('keydown', function(e) {
   setFontSize();
  })
	tokenAmt.addEventListener('keypress', function(e) {
  console.log('keypress')
	 
		e = e || window.event;
		var thekeycode = e.which ? e.keyCode : e.charCode;

	if (tokenAmt.value[0] === "0") {
			e.preventDefault();
			tokenAmt.value = String.fromCharCode(e.keyCode);
			tokenAmt.value.replace(tokenAmt.value[0], "");
		}

	}, false);

}


function inputClear() {
	tokenAmt.addEventListener("onkeydown", keyDownTextField, false);

	function keyDownTextField(e) {
		var keyCode = e.keyCode;
	}
}

function setFontSize() {
	var length = tokenAmt.value.length;

  if (length<=14){
    clearLenghtClass();

  }
  else if (length<=21){
    clearLenghtClass();	
     tokenAmt.classList.add('med' );
  }
  else {
  	clearLenghtClass();
    tokenAmt.classList.add('small');
  };
}

function clearLenghtClass() {
	tokenAmt.classList.remove('med', 'small' );
}

setDefaultValue();
inputClear();
handleInputValues();
setFontSize();
tokenAmt.focus();
tokenAmt.selectionStart = tokenAmt.selectionEnd = tokenAmt.value.length;