VUE JS의 커서 위치에 문자 삽입

VUE JS의 커서 위치에 문자 삽입

텍스트 영역에 커서가 정확히 있는 위치에 이모티콘을 삽입하려고 했습니다.를 둘러보았다how tosVUE JS는 VUE JS를 사용합니다.JS가 있다

이 코드가 있습니다.

<div class="picker" v-show="showPicker">
    <click-outside :handler="handleClickOutside">
        <picker
            set ="messenger"
            title="Pick your emoji…"
            emoji="point_up"
            @click="addEmoji"
            :emoji-size="16"
        >
        </picker> 
    </click-outside>
</div>

<textarea id="greeting_text_input" class="form-control"
    type="text" 
    v-model="greeting_text"
    rows="8"
    required
    placeholder="Hi {first-name}! Welcome to our bot. Click on the ‘Get 
    Started’ button to begin
">
</textarea>

마이 메서드

addEmoji(emoji){
        this.greeting_text += emoji.native;
        this.showPicker = !this.showPicker;
    }

이 코드는 문자열의 마지막 부분에 문자(이 경우는 emoji)를 추가합니다.이걸 위해서는 순수한 vuejs 솔루션이 필요해요.바닐라 JS 또는 Jquery를 기반으로 하는 솔루션은 거의 없기 때문에 Vue에서 이러한 문제에 대한 베스트 프랙티스는 무엇입니까?

2단계:

1 gettextarea: vue-way

1 1.1 추가reftextarea템플릿 코드에 태그를 붙입니다.

<textarea ref="ta"></textarea>

이 는 1.2로 하다보다가 .mounted컴포넌트의 훅: " " " " " 입니다.

let textarea = this.$refs.ta

커서 가져오기textarea★★★★★★ 。

let cursorPosition = textarea.selectionStart

레퍼런스: 레퍼런스

<!-- tag -->
<textarea ref="yourTextarea" v-model.trim="txtContent" ......></textarea>

// methods:
insertSomething: function(insert) {
  const self = this;
  var tArea = this.$refs.yourTextarea;
  // filter:
  if (0 == insert) {
    return;
  }
  if (0 == cursorPos) {
    return;
  }

  // get cursor's position:
  var startPos = tArea.selectionStart,
    endPos = tArea.selectionEnd,
    cursorPos = startPos,
    tmpStr = tArea.value;

  // insert:
  self.txtContent = tmpStr.substring(0, startPos) + insert + tmpStr.substring(endPos, tmpStr.length);

  // move cursor:
  setTimeout(() => {
    cursorPos += insert.length;
    tArea.selectionStart = tArea.selectionEnd = cursorPos;
  }, 10);
}

는 에에대 about about about i i i i i i 。setSelectionRange신용 카드 번호 입력을 처리하기 위해 사용했습니다.여기에 제 해결책을 보여드리기 때문에 아마 사람들이 그것에 영감을 받을 수 있을 것입니다.

템플릿:

<input
    ref="input"
    v-model="value"
    @input="handleChange"
>

인스턴스 방식:

data() {
    return {
        lastValue: '',
    }
},

methods: {
    setCursorPosition(el, pos) {
        el.focus();
        el.setSelectionRange(pos, pos);
    },
    handleChange() {
        // handle backspace event
        if (this.value.length < this.lastValue.length) {
            this.lastValue = this.value;
            this.$emit('input-changed', this.value);
            return;
        }
        // handle value-edit event
        if (this.$refs.input.selectionStart < this.value.length) {
            const startPos = this.$refs.input.selectionStart;
            this.value = this.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ').trim();
            this.$nextTick(() => this.setCursorPosition(this.$refs.input, startPos));
            this.lastValue = this.value;
            this.$emit('input-changed', this.value);
            return;
        }
        // handle everything else
        this.value = this.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ').trim();
        this.lastValue = this.value;
        this.$emit('input-changed', this.value);
    },
},

입력에 카드 입력에 공간을 추가하는 것입니다.1234123412341234으로 포맷됩니다.1234 1234 1234 1234이 영역에 진출하는 사람은 입력값을 편집할 때 문제가 발생한다는 것을 알게 됩니다.

위의 제 샘플에는 세 가지 조건이 있습니다.마지막은 2단계 콤보로 현재 값을 재구성하는 기본값입니다.모든 공간을 제거한 후 4번째 문자마다 공백을 추가합니다.

의 하면,if을 사용하다

번째 ★★★★★★★★★★★★★★.if블록하다것처럼마다 값이 시시시시시시시시시 as as as as as as as as as as as as as as as as로 됩니다.this.lastValue백스페이스를 눌렀을 때 첫 번째 조건의 목표는 정규식을 실행하지 않는 것입니다.「UX」는, 「UX」를 참조해 주세요.그 조건을 코멘트하면 알 수 있습니다.

번째 두 the theif블록은 편집 이벤트를 처리합니다.테스트의 좋은 방법은 유효한 CC를 입력하지만 세 번째 문자는 생략하고 모든 것이 1씩 꺼지도록 하는 것입니다.츠키다모모 、 잘잘될거 。마찬가지로 여러 문자를 백스페이스로 띄우는 경우에도 마찬가지입니다.두 번째 조건의 목적은 커서 위치(또는 명명법을 원하는 경우 캐럿 위치)를 적절하게 관리하는 것입니다.

첫 번째 조건과 모든 참조를 안전하게 삭제할 수 있습니다.lastValue그리고 그 코드는 여전히 작동할 것이다.이것은 거의 틀림없이 간단하지만 더 나쁜 UX이다.

언급URL : https://stackoverflow.com/questions/48145727/insert-character-at-cursor-position-in-vue-js