Vue : 텍스트 영역 입력의 문자를 제한하시겠습니까?필터를 잘라내시겠습니까?
<textarea name="" id="" cols="30" rows="10" v-model="$store.state.user.giftMessage | truncate 150"></textarea> 필터: 스스 : : : : : : : : : : : : : : : : : : : :.
filters: {
truncate(text, stop, clamp) {
return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
}
}
v-model에 입력했을 때 빌드는 깨지지 않았어요
조언 좀 해주시겠어요?
이것은 컴포넌트를 정말로 사용하고 싶은 경우 중 하나입니다.
다음 예시는 다음 컴포넌트를 렌더링하는 컴포넌트에 나타냅니다.textarea이치노
주의: 이것은 생산 준비가 되지 않았습니다.모든 코너 케이스 컴포넌트를 취급합니다.그것은 예로서 의도된 것이다.
Vue.component("limited-textarea", {
props:{
value:{ type: String, default: ""},
max:{type: Number, default: 250}
},
template: `
<textarea v-model="internalValue" @keydown="onKeyDown"></textarea>
`,
computed:{
internalValue: {
get() {return this.value},
set(v){ this.$emit("input", v)}
}
},
methods:{
onKeyDown(evt){
if (this.value.length >= this.max) {
if (evt.keyCode >= 48 && evt.keyCode <= 90) {
evt.preventDefault()
return
}
}
}
}
})
는 「」를 실장합니다.v-model텍스트 길이가 지정된 최대값보다 작을 경우에만 데이터에 대한 변경을 내보냅니다.은 '듣다', '듣다', '듣다' 입니다.keydown텍스트 길이가 허용된 최대 길이 이상인 경우 기본 액션(문자 포함)을 방지합니다.
console.clear()
Vue.component("limited-textarea", {
props:{
value:{ type: String, default: ""},
max:{type: Number, default: 250}
},
template: `
<textarea v-model="internalValue" @keydown="onKeyDown"></textarea>
`,
computed:{
internalValue: {
get() {return this.value},
set(v){ this.$emit("input", v)}
}
},
methods:{
onKeyDown(evt){
if (this.value.length >= this.max) {
if (evt.keyCode >= 48 && evt.keyCode <= 90) {
evt.preventDefault()
return
}
}
}
}
})
new Vue({
el: "#app",
data:{
text: ""
}
})<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
<limited-textarea v-model="text"
:max="10"
cols="30"
rows="10">
</limited-textarea>
</div>질문의 코드에 관한 또 다른 문제는 Vuex가 상태 값을 직접 설정할 수 없다는 것입니다.변환을 통해 값을 설정해야 합니다.즉, 새로운 값을 받아들여 설정하는 Vuex 변환이 존재해야 하며, 코드는 변환을 커밋해야 합니다.
mutations: {
setGiftMessage(state, message) {
state.user.giftMessage = message
}
}
그리고 Vue에서는:
computed:{
giftMessage:{
get(){return this.$store.state.user.giftMessage},
set(v) {this.$store.commit("setGiftMessage", v)}
}
}
에는 「」를 사용할 가 있습니다.getterMessage라고합니다.) (기프트 메시지)템플릿에서 사용하는 것은 다음과 같습니다.
<limited-textarea cols="30" rows="10" v-model="giftMessage"></limited-textarea>
다음은 Vuex를 사용하는 전체 예입니다.
console.clear()
const store = new Vuex.Store({
state:{
user:{
giftMessage: "test"
}
},
getters:{
giftMessage(state){
return state.user.giftMessage
}
},
mutations:{
setGiftMessage(state, message){
state.user.giftMessage = message
}
}
})
Vue.component("limited-textarea", {
props:{
value:{ type: String, default: ""},
max:{type: Number, default: 250}
},
template: `
<textarea v-model="internalValue" @keydown="onKeyDown"></textarea>
`,
computed:{
internalValue: {
get() {return this.value},
set(v){ this.$emit("input", v)}
}
},
methods:{
onKeyDown(evt){
if (this.value.length >= this.max) {
if (evt.keyCode >= 48 && evt.keyCode <= 90) {
evt.preventDefault()
return
}
}
}
}
})
new Vue({
el: "#app",
store,
computed:{
giftMessage:{
get(){ return this.$store.getters.giftMessage},
set(v){ this.$store.commit("setGiftMessage", v)}
}
}
})<script src="https://unpkg.com/vue@2.4.2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.js"></script>
<div id="app">
<limited-textarea v-model="giftMessage"
:max="10"
cols="30"
rows="10">
</limited-textarea>
Message: {{giftMessage}}
</div>말씀하시는데 끼어들어서 미안해요.해결책을 찾고 있었어요전부 다 봤어요저한테는 너무 복잡해 보여요.나는 항상 상징성을 찾고 있다.Therefor I like the answer of @Даниил Пронин.단, By @J. Rambo는 잠재적인 문제를 지적했습니다.
네이티브 html 텍스트 요소에 가능한 한 가까이 있어야 합니다.제가 생각해낸 솔루션은 다음과 같습니다.
Vue 템플릿
<textarea v-model="value" @input="assertMaxChars()">
자바스크립트
let app = new Vue({
el: '#app',
data: {
value: 'Vue is working!',
maxLengthInCars: 25
},
methods: {
assertMaxChars: function () {
if (this.value.length >= this.maxLengthInCars) {
this.value = this.value.substring(0,this.maxLengthInCars);
}
}
}
})
https://repl.it/@tsboh/LimitedCharsInTextarea 링크입니다.
장점은 다음과 같습니다.
- 요소는 가능한 한 네이티브 요소에 가깝다
- 단순 코드
- 텍스트 영역이 포커스를 유지하다
- 아직 작업 삭제
- 붙여넣기 텍스트도 사용할 수 있습니다.
어쨌든 해피 코딩
나는 선택된 답변에 동의하지만.키 다운 이벤트핸들러를 사용하면, 길이를 간단하게 방지할 수도 있습니다.
Vue 템플릿
<input type="text" @keydown="limit( $event, 'myModel', 3)" v-model="myModel" />
자바스크립트
export default {
name: 'SomeComponent',
data () {
return {
myModel: ''
};
},
methods: {
limit( event, dataProp, limit ) {
if ( this[dataProp].length >= limit ) {
event.preventDefault();
}
}
}
}
이렇게 하면 정규 표현을 사용하여 허용된 키의 유형을 방지할 수도 있습니다.예를 들어 숫자 값만 허용하려는 경우 다음을 수행할 수 있습니다.
methods: {
numeric( event, dataProp, limit ) {
if ( !/[0-9]/.test( event.key ) ) {
event.preventDefault();
}
}
}
@J Ws 답변이 향상되었습니다.결과 코드는 어떤 키 누름에 반응하는 방법을 정의할 필요가 없으며, 따라서 허용된 답변과 대조적으로 어떤 문자에서도 사용할 수 있습니다.결과의 문자열 길이에만 관심이 있습니다.또한 복사 붙여넣기 작업을 처리할 수 있으며 너무 긴 붙여넣기를 다음과 같은 크기로 잘라낼 수 있습니다.
Vue.component("limitedTextarea", {
props: {
value: {
type: String,
default: ""
},
max: {
type: Number,
default: 25
}
},
computed: {
internalValue: {
get: function () {
return this.value;
},
set: function (aModifiedValue) {
this.$emit("input", aModifiedValue.substring(0, this.max));
}
}
},
template: '<textarea v-model="internalValue" @keydown="$forceUpdate()" @paste="$forceUpdate()"></textarea>'
});
이 매직은 @keydown 및 @paste-events에 있으며 강제로 업데이트를 수행합니다.값이 이미 올바른 크기로 잘렸기 때문에 internalValue가 그에 따라 동작하고 있음을 보증합니다.
체크되지 않은 스크립트 변경으로부터 값을 보호하는 경우에도 다음 워처를 추가할 수 있습니다.
watch: {
value: function(aOldValue){
if(this.value.length > this.max){
this.$emit("input", this.value.substring(0, this.max));
}
}
}
이 간단한 해결책에 문제가 있습니다.커서를 중간 위치에 놓고 최대값을 초과하여 입력하면 마지막 문자가 제거되고 커서가 텍스트 끝으로 설정됩니다.그래서 아직 개선의 여지가 있다...
커스텀 디렉티브 버전사용하기 쉽다.
<textarea v-model="input.textarea" v-max-length="10"></textarea>
Vue.directive('maxlength',{
bind: function(el, binding, vnode) {
el.dataset.maxLength = Number(binding.value);
var handler = function(e) {
if (e.target.value.length > el.dataset.maxLength) {
e.target.value = e.target.value.substring(0, el.dataset.maxLength);
var event = new Event('input', {
'bubbles': true,
'cancelable': true
});
this.dispatchEvent(event);
return;
}
};
el.addEventListener('input', handler);
},
update: function(el, binding, vnode) {
el.dataset.maxLength = Number(binding.value);
}
})
- Event()에 브라우저 호환성 문제가 있습니다.
- 유감스럽게도 CJK에서는 키다운 방식이 잘 되지 않는 것 같습니다.
- 이 방법은 입력 이벤트를 2배로 발생시키기 때문에 부작용이 발생할 수 있습니다.
당신의 코드를 사용하여 로 분류했습니다.Vue 컴포넌트, 감사합니다! <template> <textarea v-model="internalValue" @keydown="onKeyDown"></textarea> </template>
`
export default {
props:{
value:{ type: String, default: ""},
max:{type: Number, default: 250}
},
computed:{
internalValue: {
get() {return this.value},
set(v){ this.$emit("input", v)}
}
},
methods:{
onKeyDown(evt){
if (this.value.length >= this.max) {
evt.preventDefault();
console.log('keydown');
return
}
}
}
}
가장 좋은 방법은 watch를 사용하여 문자열 길이를 설정하고 문자열이 원하는 길이보다 긴 경우 오래된 값을 설정하는 것입니다.
watch: {
'inputModel': function(val, oldVal) {
if (val.length > 250) {
this.inputModel = oldVal
}
},
},
Atribute를 다음과 같이 입력합니다.
<textarea v-model="value" maxlength="50" />
언급URL : https://stackoverflow.com/questions/46289311/vue-limit-characters-in-text-area-input-truncate-filter
'programing' 카테고리의 다른 글
| 정적 콘텐츠(예: 국가 코드)를 vue.js 앱의 어디에 저장합니까? (0) | 2022.06.01 |
|---|---|
| Vue.js에서 컴포넌트가 재렌더되는 원인이 되는 데이터 변경을 찾는 방법 (0) | 2022.06.01 |
| Vue 컴포넌트 템플릿의 요소 속성에 문자열과 변수를 조합 (0) | 2022.06.01 |
| 타임아웃으로 Input Stream에서 읽을 수 있습니까? (0) | 2022.05.31 |
| Vue 라우터 - 매개 변수가 전달되지 않음 (0) | 2022.05.31 |