Input을 구현하는 다양한 방법(Input, Textarea, ContentEditable)

(프로젝트 앞광고)

https://mandalart.ddongule.com/

 

이번에 만다라트라는 작은 프로젝트를 사브작 사브작 만들면서 사용자 입력을 받는 Input에 대한 고민을 하게 되었다. 

내가 원래 만들고자 한 내용은 아래와 같은 모양이었다. 

1. 정사각형 모양 (contentEditable, Textarea, Input)

2. 글씨가 vertically, horizontally centered (contentEditable, Input) / Textarea도 가능하긴 한 것 같은데 아직 답을 찾지 못했다ㅠ

3. multi line이 가능 (contentEditable, Textarea)

 

처음에는 단순히 Input으로 구현했지만, 내가 원하는 multi line을 만드려면 textarea로 바꾸어야 했다.

그리고 그 과정 중에 textarea에서 커서를 중앙으로 옮기기 어려워 결국에는 contenteditable로 구현했다. 

 

몇가지 이유로 contenteditable은 되도록이면 사용하지 않으려고 했는데, ㅠㅠ 디자인에 무릎을 꿇었다. 예쁘게 봐주세요ㅠㅠ

이유는 아래에 공부한 내용과 함께 서술하려구 한다. 저와 같은 고민을 하시는 분들이 있으시다면 도움이 되기를!

다음 배포 때에는 애니메이션도 넣고 contentEditable도 textarea로 리팩토링해 배포하고 싶다. (언제하지?) 

Input

developer.mozilla.org/en-US/docs/Web/HTML/Element/input

: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

우리가 정~말 자주 사용하는 Input! 

하지만 만다라트 프로젝트에 Input 속성은 걸맞지 않았다. 

Input은 익숙해서인지 다루기 편했지만 한 줄로 밖에 작성이 되지 않았기 때문이다. 따흑!

그래서 앞서 말한 정사각형 모양의 Table Input으로는 사용하지 못했다.

대신 나만의 이름을 지정해 사용할 수 있도록 이렇게 꾸며봤다.

TMI지만 이게 가운데 정렬이라 input이 늘어나는대로 smooth하게 가운데 정렬이 계속 되게 만드는 걸로 엄청 애먹었다.

근데 아직 엄청나게 smooth 하진 않다. 이것도 점차 고쳐나가야지!!!!!!!!!!!!!

animation은 역시 어려워!!!!!!!!!!!! 그래도 애니메이션 구현한거 다음에 글로도 끄적여놔야겠다.

내가 애먹었으니 다음에 쓸 사람들은 내 블로그 보고 좀 더 쉽게 구현했으면!

입력에 따라 정렬이 되는 모습 꺅!

Textarea

Textarea는 multiline도 가능하고 input에 따라 크기를 늘이고 줄이기도 쉬웠다.

여기서 소개하는 세가지 input 중에 가장 유연하게 사용할 수 있는 느낌이랄까!?

 

중앙 정렬만 잘 되었어도 이걸로 사용했을텐데.. 사용하지 못해 아쉬움이 남는 Textarea이다. 

종종 그런데 이렇게 중앙정렬된 textarea를 사용할 만한 일이 있을 것 같다.

이번 기회에 찾아놓고 정리해놓아야겠다는 생각이 들었다. (미래의 나에게 위임!)

 

developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

 

 

ContentEditable

developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

contenteditable - HTML: HyperText Markup Language | MDN

contentEditable은 존재한다는 것만 알았지 한 번도 사용해 본 적이 없었는데, 이번 기회에 사용해봤다. 헤헤 

내가 원하는 태그에 contentEditable만 넣으면 어랏?! 이게 되네?! 하면서 안에 텍스트를 입력할 수 있게 된다.

하지만 공식적으로 정해진 표준이 아니라서.. 브라우저마다 동작이 다르게 된다는 문제점이 발생한다. 따흑

나는 아이폰을 쓰는데 safari에서 contentEditable에 대응하려면 user-select: text를 넣어줘야했다. 

chrome의 경우에는 user-modify가 들어가야 한다. 이런 식으로 일일히 대응을 해주어야 한다니!! (실화야?)

참으로 귀찮은 일이 아닐 수가 없다 꺄륵

또 내가 생각하지 못해 대응하지 못한다면 곳곳에서 오류가 발생할 것 같아서 이 contentEditable이라는 녀석에 대해 더 공부해서 제대로 대응을 하든가, 아니면 textarea를 사용하는 편이 더 나아보인다.

그리고!!!!!!! 어딘가에서 내용을 복사해 contentEditable에 가져다가 붙여넣으면 그 style 속성까지 다 가져와버린다. 왜그러는거야!!

막기 위한 코드를 몇줄 작성해놓았지만 동작을 제대로 안하는 것 같아 이것도 고쳐야한다. ㅎㅎㅎ

 

진짜 진짜 마지막으로는.. 이렇게 Cross Browsing에 대한 내용 뿐만 아니라.. 최근에 웹 접근성..에 대해서도 배웠는데, 사용자의 입력을 받는 부분인데 input이나 textarea태그를 사용하지 않고 span태그를 사용하는 것이 마음에 걸렸다. 

 

일단 빠른 배포를 위해 이렇게 만들어 놓기는 했지만, 아직 개선점들이 곳곳에 보인다.

누가 PR 날려주면 정말 고맙겠군 .^^ ㅎ

아무도 안날리겠찌 . 내가 해야겐네 . ㅎ

심심할 때마다 개선해나가봐야겠다 . 

 

한 줄 느낀 점) 크킄,,,,,,, 근데.... 이거 너무 재밌따!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! >>ㅑ륵 🧡 

(수미상관을 지키기 위한 앞광고 2)

github.com/ddongule/mandal-art

ddongule/mandal-art