Element UI Input组件内容格式化:换行时行首添加圆点

<el-input v-model="input"placeholder="请输入"type="textarea":rows="8"@focus="handleFocus"@input.native="handleInput" />

解释一下:

  1. Element UI对 input 事件做了一层包装,无法返回event对象,使用 .native 修饰符可以返回event对象
  2. 圆点符号• 在Element UI默认的字体下显示为方块,需要修改默认字体为雅黑

<script>
export default {name: 'DashBoard',data () {return {input: ''}},methods: {// 获得焦点时,如果内容为空,首行添加圆点handleFocus () {if (this.input !== '') returnthis.input = '• '},// 录入文本时,每换一行在行首添加圆点handleInput (event) {if (event.inputType === 'insertLineBreak') {let txt = event.targetlet currentCursorPosition = txt.selectionStartlet textBeforeCursor = txt.value.substring(0, currentCursorPosition)let textAfterCursor = txt.value.substring(currentCursorPosition)// 添加特殊符号到新行的行首txt.value = textBeforeCursor + "• " + textAfterCursor// 重新设置光标位置txt.setSelectionRange(currentCursorPosition + 2, currentCursorPosition + 2)// 双向绑定的数据重新赋值this.input = txt.value}}}
}
</script>

解释一下:

  • HTMLInputElement.selectionStart

         一个表示选择文本的开始索引的数字。当没有选择时,它返回当前文本输入光标位置的偏移量。

HTMLInputElement - Web API 接口参考 | MDN

 

  • InputEvent.inputType

         InputEvent 接口中的只读属性 inputType 返回对可编辑内容所做更改的类型。可能的更改包括插入、删除和格式化文本。以下是一些可能的 inputType 值:

  1. "insertText": 表示插入文本,通常与用户键入文本时触发的输入事件相关。
  2. "insertLineBreak": 表示插入换行符,通常与用户按下回车键时触发的输入事件相关。
  3. "deleteContentBackward": 表示向后删除内容,通常与用户按下删除键时触发的输入事件相关。
  4. "deleteContentForward": 表示向前删除内容,通常与用户按下删除键时触发的输入事件相关。
  5. "deleteWordBackward": 表示向后删除单词,通常与用户按下组合键(例如 Ctrl + Backspace)时触发的输入事件相关。
  6. "deleteWordForward": 表示向前删除单词,通常与用户按下组合键(例如 Ctrl + Delete)时触发的输入事件相关。

InputEvent.inputType - Web API 接口参考 | MDN

  • HTMLInputElement.setSelectionRange()

        HTMLInputElement.setSelectionRange 方法用于设定<input> 或 <textarea> 元素中当前选中文本的起始和结束位置。

HTMLInputElement.setSelectionRange() - Web API 接口参考 | MDN

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629486.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL联结表及高级联结

关系表 理解关系表的最好方法 是 来看 一个 现实 世界 中的 例子。 假如 有一个 包含 产品 目录 的 数据库 表&#xff0c; 其中 每种 类别 的 物品 占 一行。 对于 每种 物品 要 存储 的 信息 包括 产品 描述 和 价格&#xff0c; 以及 生产 该 产品 的 供应商 信息。 假如 有…

利用c 原生头文件完成JPEG全流程编码

骄傲一下&#xff0c;经过一个多月的努力&#xff0c;终于完成jpeg的全套编码。经验证此程序可以把摄像头yuv信号转为JPG图片。现在的程序还不完美&#xff0c;只能对长和宽尺寸是16倍数的信号转码。而且转码速度太慢&#xff0c;一帧1280720的图片要2秒多。此程序只能对yuv420…

SQL进阶3

二、多表连结 1、什么叫联结 下面&#xff0c;我们举个例子来说明&#xff1a; 学校的安排的课程信息&#xff0c;我们平时都会为主要人员负责的对应课程信息创建表格&#xff0c;让其更好地检索得到对应数据信息。学生可以查到自己本身的课程信息&#xff0c;而老师也可以查…

2023科技风暴:AI璀璨之旅与算法备案护航

2023年&#xff0c;中国科技界风起云涌&#xff0c;热闹非凡。在这一年里&#xff0c;我们的科学家们在前沿科研战场上一次次刷新纪录&#xff0c;展现了敢于突破、勇于创新的精神。而在这场科技盛宴中&#xff0c;AI无疑是最亮的星星。让我们体验了一波跟着AI重走2023中国科技…

Vue-19、Vue监测数据的原理_对象

1、数据代理 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>vue监测数据改变的的原理</title><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue2/dist…

Spark---累加器和广播变量

文章目录 1.累加器实现原理2.自定义累加器3.广播变量 1.累加器实现原理 累加器用来把 Executor 端变量信息聚合到 Driver 端。在 Driver 程序中定义的变量&#xff0c;在Executor 端的每个 Task 都会得到这个变量的一份新的副本&#xff0c;每个 task 更新这些副本的值后&…

浅谈敏捷开发的思维

什么是敏捷 Agile&#xff08;敏捷&#xff09;来源于敏捷宣言&#xff0c;宣言明确指出&#xff0c;“敏捷”&#xff1a; 不是一种方法论也不是开发软件的具体方法更不是一个框架或者过程 “敏捷”是一套价值观&#xff08;理念&#xff09;和原则&#xff0c;帮助团队在软…

PPO 跑CartPole-v1

gym-0.26.2 cartPole-v1 参考动手学强化学习书中的代码,并做了一些修改 代码 import gym import torch import torch.nn as nn import torch.nn.functional as F import numpy as np import matplotlib.pyplot as plt from tqdm import tqdmclass PolicyNet(nn.Module):def __…

HTML--JavaScript--语法基础

变量与常量 这个基本上没啥问题 变量命名规则&#xff1a; 变量由字母、数字、下划线、$组成&#xff0c;且变量第一个字符不能为数字 变量不能是系统关键字和保留字 语法&#xff1a; var 变量名 值&#xff1b;所有Javacript变量都由var声明 定义赋值字符串&#xff1a; …

GaussDB(DWS)查询优化技术大揭秘

GaussDB(DWS)查询优化技术大揭秘 大数据时代&#xff0c;数据量呈爆发式增长&#xff0c;经常面临百亿、千亿数据查询场景&#xff0c;当数据仓库数据量较大、SQL语句执行效率低时&#xff0c;数据仓库性能会受到影响。本文将深入讲解在GaussDB(DWS)中如何进行表结构设计&#…

【Web】websocket应用的是哪个协议

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Web ⛳️ 功不唐捐&#xff0c;玉汝于成 前言 在当今互联网时代&#xff0c;实时性和即时通讯成为网络应用日益重要的一部分。WebSocket 协议作为一种创新性的通信协议&#xff0c;极大地改善了…

C语言——编译和链接

&#xff08;图片由AI生成&#xff09; 0.前言 C语言是最受欢迎的编程语言之一&#xff0c;以其接近硬件的能力和高效性而闻名。理解C语言的编译和链接过程对于深入了解其运行原理至关重要。本文将详细介绍C语言的翻译环境和运行环境&#xff0c;重点关注编译和链接的各个阶段…

Architecture Lab:预备知识2【汇编call/leave/ret指令、CS:APP练习4.4】

chap4的练习4.4&#xff08;page.255&#xff09;让用Y86-64实现rsum&#xff08;递归求数组元素之和&#xff09;&#xff0c;提示为&#xff1a;先得到x86-64汇编代码&#xff0c;然后转换成Y86-64的 这是rsum的c实现&#xff1a; long rsum(long *start, long count) {if …

CSS笔记III

选择器 结构伪类选择器 作用&#xff1a;根据元素的结构关系查找元素 选择器说明E:first-child查找第一个E元素E:last-child查找最后一个E元素E:nth-child(N)查找第N个E元素(第一个元素N值为1) nth-child(公式) 作用是可以根据元素的结构关系查找多个元素 偶数标签&#x…

【面试合集】说说微信小程序的发布流程?

面试官&#xff1a;说说微信小程序的发布流程&#xff1f; 一、背景 在中大型的公司里&#xff0c;人员的分工非常仔细&#xff0c;一般会有不同岗位角色的员工同时参与同一个小程序项目。为此&#xff0c;小程序平台设计了不同的权限管理使得项目管理者可以更加高效管理整个团…

微软推出付费版Copilot

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 微软已经超越苹果&#xff0c;成了全球市值最高的公司&#xff0c;其他公司都因为AI大裁员&#xff0c;而微软正好相反&#xff0c;当然这个原因很简单&#xff1a;就是微软强制把AI全面接入到系统里来了。而Copilot…

Mac系统下,保姆级Jenkins自动化部署Android

一、Jenkins自动化部署 1、安装jenkins 官网&#xff1a;macOS Installers for Jenkins LTS 选择macOS brew install jenkins-lts 安装最新: brew install jenkins-lts 启动jenkins服务: brew services start jenkins-lts 重启jenkins服务: brew services restart jenkin…

Day29- 贪心算法part03

一、K 次取反后最大化的数组和 题目一&#xff1a;1005. K 次取反后最大化的数组和 1005. K 次取反后最大化的数组和 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰…

web开发学习笔记(2.js)

1.引入 2.js的两种引入方式 3.输出语句 4.全等运算符 5.定义函数 6.数组 7.数组属性 8.字符串对象的对应方法 9.自定义对象 10.json对象 11.bom属性 12.window属性 13.定时刷新时间 14.跳转网址 15.DOM文档对象模型 16.获取DOM对象&#xff0c;根据DOM对象来操作网页 如下图…

基于杂交PSO算法的风光储微网日前优化调度(MATLAB实现)

微网中包含&#xff1a;风电、光伏、储能、微型燃气轮机&#xff0c;以最小化电网购电成本、光伏风机的维护成本、蓄电池充放电维护成本、燃气轮机运行成本及污染气体治理成本为目标&#xff0c;综合考虑&#xff1a;功率平衡约束、燃气轮机爬坡约束、电网交换功率约束、储能装…