1

I have a list of words and am designing an input field to edit them. But I don't want to use input[type=text] tag if that word is not fit that field. What I mean is I want to see all characters at the same time. To conclude, I want to use textarea if input tag is not enough to display all characters of selected word. To do that, I thought that if I use a secret textarea field to detect if that word needs a new line. But I couldn't get the row count cause when I check the value of the input passed in v-model, that value has not any "\n" character or something like that. I've also tried to check the length of that word, but I guess textarea does not look for length to get exceeding part of long words. For example, "aaaa aaaaaa aaaaa" (length=17) is displayed with next line, but "iiii iiiiii iiiii" (length=17) is not. Is there any way to detect that? Or any other way to decide that I need texarea over input tag?

This is what I do now:

<textarea id="secret-word" v-model="word" v-show="false"></textarea>
<textarea id="word-textarea" class="form-control" :value="word" @input="updateWord" v-if="isTextAreaNeeded"></textarea>
<input id="word-input" type="text" class="form-control" :value="word" @input="updateWord" v-else>


<script>
computed: {
            isTextAreaNeeded() {
                let input = document.getElementById("word-input")
                if (input) {
                    let width = input.scrollWidth
                    return this.word.length > width
                }
                return false
            }
        },
</script>
Oğuz Öztınaz
  • 165
  • 9
  • 1
    Does it help you? https://stackoverflow.com/a/25467363/10659482 – Akif Nov 26 '20 at 06:36
  • @Akif unfortunately. It gives the full width. I don't want that word to scroll right. If it's needed to scroll, it will have a next line. That's what I want. – Oğuz Öztınaz Nov 26 '20 at 07:00

0 Answers0