前端對於處理空格問題場景總結
禁止input輸入所有空格
方法1
<
input
type
=
“text”
onKeypress
=
“javascript：if（event。keyCode == 32）event。returnValue = false；”
/>
方法2
<
input
type
=
“text”
onkeyup
=
“this。value=this。value。replace（/^\s+|\s+$/g，‘’）”
>
去字串的首尾空格
String
。
prototype
。
trim
（）
<
input
type
=
“test”
v
-
model
。
trim
=
“keyword”
>
注意：是提交欄位的時候去除首尾空格，但是空格還是能夠輸入的
禁止輸入首尾空格，能輸入中間空格
方法1
<
input
v-model
=
“keyword”
placeholder
=
“原生input框”
/>
//watch監聽
watch： {
keyword（newval） {
this。keyword = newval。trim（）
}
}
注意：這種方式只適合原生input框，假如說v-model是用在第三方的封裝元件中的，那麼監聽keyword關鍵字禁止輸入兩邊空格是沒效果的
原因：未知
解決辦法：監聽輸入空格的鍵盤事件
<
myInput
v-model
=
“entry”
@
keyup
。
space
。
native
=
“submit”
>
myInput
>
submit （event） {
this。entry=this。entry。trim（）
}
注意：監聽元件根元素要用native修飾符
當然，如果你想用ref直接來修改value的值，這樣也不行，如果你瞭解v-model的原理的話，就知道，其實v-model就是傳入一個value的prop屬性，當你直接修改這個屬性值時，vue會發發出警告
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders。 Instead， use a data or computed property based on the prop‘s value。 Prop being mutated： “value 大意就是： 避免直接更改prop，因為每當父元件重新渲染時，該值都會被覆蓋。而是使用基於屬性值的資料或計算屬性來修改此值
那如果是自己封裝的v-model元件可以在元件中用一個計算屬性來去除空格，然後再傳值給input的value - 自己封裝的v-model元件
<
template
>
<
div
class
=
”item“
>
<
input
：value
=
”setValue“
@
input
=
”input（$event）“
placeholder
=
”自定義元件的v-model“
/>
div
>
template
>
<
script
>
export
default
{
props
：
{
value
：
String
}，
data
（）
{
return
{}
}，
computed
：
{
//為了去除空格
setValue
（）
{
return
this
。
value
。
trim
（）
}
}，
methods
：
{
input
（
event
）
{
this
。
$emit
（
’input‘
，
event
。
target
。
value
）
}
}
}
script
>
引用元件
<
myInput
v-model
=
”keyword“
>
myInput
>
附：文件地址
https：//
cn。vuejs。org/v2/guide/c
omponents。html#ad
下一篇：怎麼養成冷白皮？
