在vue项目中获取input输入框中被鼠标选中的值 请写一段代码
时间: 2024-05-02 07:19:52 浏览: 171
可以使用v-model指令来实现获取input输入框中被鼠标选中的值。以下是示例代码:
```
<template>
<div>
<input v-model="inputValue" @select="handleSelect">
<p>选中的值: {{ selectedValue }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
selectedValue: ''
}
},
methods: {
handleSelect() {
this.selectedValue = window.getSelection().toString()
}
}
}
</script>
```
当用户在input输入框中选中任意文本时,会触发@select事件。事件处理方法handleSelect获取当前被选中文本的值,并把它赋值给selectedValue变量。这样就可以在模板中显示被选中的值了。
相关问题
在vue项目中 获取input输入框中被鼠标选中的值 请写一段代码
好的,以下是获取input输入框中被鼠标选中的值的代码示例:
```javascript
// 获取input输入框
let inputEl = document.querySelector('input');
// 监听input的鼠标up事件
inputEl.addEventListener('mouseup', function() {
// 获取被选中的文本
let selectedText = window.getSelection().toString();
// 输出被选中的文本
console.log(selectedText);
});
```
希望对您有所帮助!
阅读全文