Input 태그 width 자동 조절

input태그를 사용하다가 입력한 크기만큼 자동으로 조절이 안돼서

직접 함수를 만들어서 처리하고 이것저것 해보았지만 원하는 느낌이 안나오다 찾아보니 간단하게 해결할 수 있었다.

 

field-sizing: content 를 활용하면 input의 width값이 자동으로 조절이 된다.

<input v-model="tagValue" type="text" placeholder="입력"/>

input {
      field-sizing: content;
      min-width: 50px;
    }

 

이처럼 해당 css만 넣어주면 알아서 input의 width값이 자동으로 적용된다.

추가적으로 min-width값으로 placeholder의 크기를 고려해서 설정해준다.

 

field-sizing 속성은 사용자가 직접 데이터를 입력하는 요소에만 적용이 되며, div나 span 같은 이런 요소에는 적용이 되지 않는다.

따라서 UI컴포넌트 라이브러리의 input을 사용할때는 라이브러리의 input컴포넌트 안의 input태그에 직접 css를 추가하면 된다.

 

현재는 vue를 사용하고 있기에 vue에서 ui 컴포넌트 라이브러리중 하나인 element-plus에서 el-input을 사용할때

css를 이렇게 주면 el-input의 width값이 정상적으로 자동 조절이 된다.

.auto-width {
    width: fit-content;
    .el-input__inner {
      field-sizing: content;
      min-width: 50px;
    }
  }

 

이처럼 element-plus에도 input에 css를 넣어줌으로써 자동으로 width값이 바뀌게 된다.