如下代码即可完成


				<input
					enterkeyhint="send"
					v-model="params.content"
					placeholder="说点啥..."
					@keydown.enter="addcomment(params.content, $event)"
					@blur="addcomment(params.content)"
				/>

			<el-input
				placeholder="说点什么吧"
				enterkeyhint="send"
				v-model="content"
				@keyup.enter.native="addcomment(content, $event)"
				@blur="addcomment(content)"
			></el-input>

enterkeyhint="send" 即可将软键盘的回车键按钮文字改成发送

input标签用 @keydown.enter

el-input标签用 @keyup.enter.native 俩者都是监听回车事件 安卓苹果一样的效果

@blur监听苹果软键盘右上角 “完成” 点击事件

如触发回车事件想要收回软键盘 则要触发键盘blur事件,关键要在回车事件方法里加上$event


		<input
		    class="pseudoLive_input verticalCenter"
			enterkeyhint="send"
			v-model="params.content"
			placeholder="说点啥..."
			@keydown.enter="addcomment(params.content, $event)"
			@blur="addcomment(params.content)"
		/>

        // 关键在于$event

		addcomment(content, e) {
			if (content) {
				var comment = content
				var obj = {
					content: comment,
					fakeLiveBroadcastId: 1,
					id: 8,
					name: '我是超级大美女8',
					userId: 8
				}
				this.params.content = ''
                this.list.push(obj)
			}
			if (e) {
				e.target.blur()
			}
		},

还有其他更多更改软键盘的文字,如下

<input enterkeyhint="enter">
<input enterkeyhint="done">
<input enterkeyhint="go">
<input enterkeyhint="next">
<input enterkeyhint="previous">
<input enterkeyhint="search">
<input enterkeyhint="send">
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐