Vue3 - 实现 textarea 多行输入框的 placeholder 换行显示功能，让 input（type=textarea）输入框 placeholder 灰色描述文字识别 \n断行显示教程

已于 2024-02-03 14:41:23 修改
阅读量3.7k 收藏 3
点赞数 3
分类专栏： + Vue3 文章标签： vue3.js textarea i type textarea placeholder placeholder换行断行 多行输入框灰色提示文字换行展示 el-input 换行显示灰字
于 2023-09-20 13:22:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/133075047
版权
+ Vue3 专栏收录该内容
115 篇文章 841 订阅 ¥9.90 ¥99.00
订阅专栏

前言

本方案适用于 Vue2/3、Nuxt、uniapp、微信小程序，前端 UI 组件库的输入框组件也可以使用。

本文 实现了 textarea 多行文本输入框 placeholder 换行显示功能，解决 input 输入框 type=textarea 时灰色描述文字断行显示功能，完美搞定回车 \n 不生效的问题，

支持自由换行、识别多个连续空格、任意排版，您只需要复制粘贴便可使用，

如下图所示，原来没有换行，但用了本文的方法后就换行了，

示例代码干净整洁，无任何乱七八糟代码

在这里插入图片描述 在这里插入图片描述

示例代码

以下代码为解决方案，您可以进行复制并解决。

如下代码所示，

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue - 实现 textarea 多行输入框的 placeholder 换行显示功能，让 input（type=textarea）输入框 placeholder 灰色描述文字识别 \n 断行显示教程
王佳斌
09-20 4656
vue，textarea多行文本输入框，input type=textarea多行输入框文本，vue如何将textarea多行输入框的placeholder换行显示，vue怎么让placeholder断行显示，vue项目多行输入框placeholder灰色提示文字换行断行显示，vue实现placeholder识别\n并且换行，vue输入框placeholder不识别\n转义字符怎么办，在input、textarea 标签的placeholder中实现换行的方法，vue框架下,textarea怎样写出多行的p
Vue 实现分页与输入框关键字筛选功能
12-30
分页的实现(Vue+Element)+输入框关键字筛选 1.这里用的是Element 自带的分页组件 <div class=sales-table> <div class=order-list-header>订单列表 <div class=back-box> <div class=search-box><input type=...
auto-textarea:基于Vue的高度自适应文本输入框
05-13
auto-textarea 基于Vue的高度自适应文本输入框 Use Setup (开始) Install auto-textarea (安装) $ npm install auto-textarea --save package.json "auto-textarea": "^1.3.6" Use (如何引入) // 方法一 // import with ES6 import Vue from 'vue' import autoTextarea from 'auto-textarea' // require with Webpack/Node.js var Vue = require('vue') var autoTextarea = require('autoTextarea') // use Vue.use(au
vue中使用input[type=”file”]实现文件上传功能
12-29
注意:input[type=file] 标签中的属性accept=application/msword,application/pdf 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下—下面有更改:) “` <template> <div id=my-careers> <head-top id=header> <i slot=left class=iconfont></i> <span slot=title>Appl
vue中 input placeholder换行
最新发布
qq_45309871的博客
04-19 160
vue中 input placeholder换行。
vue element-ui实现input输入框金额数字添加千分位
10-15
主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue的应用—表单
m0_48180834的博客
08-23 429
在dom中我们是通过获取其dom节点然后.val来获取其值，.innerText来获取其文本，而在vue中是通过v-model实现双向数据绑定获取值 Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。 Object.defineProperty(obj, prop, descriptor) obj：要定义属性的对象。 prop：要定义或修改的属性的名称或 Symbol 。 descriptor：要定义或修改的属性描述符。
用vue手写input 批量新增 框
m0_58213417的博客
03-27 1083
希望能帮助到各位小伙伴。
Vue3文本域（Textarea）
Mr Dear的博客
07-25 2758
用于多行输入
Vue中多行文本输入框textarea的placeholder内的文本多行显示
qq_43576662的博客
06-26 6627
我们在使用多行文本输入框的时候，需要提示框内的文字多行显示 发现使用\n等都无效，placeholder并不可以识别出来 后来发现只能采取最原始粗暴的方法，placeholder内的文本换行显示，例如： <textarea placeholder="你好！ 哈喽~ 我在呢"></textarea> 即可完成想要的多行文本显示效果，不过个人觉得html代码不够美观 如果有更好的办法，欢迎评论区指正 ...
vue改造textarea多行文本框样式
公众号安哥说前端
07-28 4336
vue改造textarea多行文本框样式
vue3+textarea实现高度自适应
包子脸爱学习的博客
06-29 1444
vue3 + textarea实现高度自适应 <template> <textarea ref="textareaRef" v-model="content" class="my-textarea" :rows="rows"/> </template> <script> import {ref, watch, nextTick, onMounted} from 'vue' export default { name: 'MyTextarea', compo
vue中使用input[type="file"]实现文件上传功能
10-18
主要介绍了vue中使用input[type="file"]实现文件上传功能，实现代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue实现动态显示textarea剩余字数
08-30
主要为大家详细介绍了Vue实现动态显示textarea剩余文字数量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现Input输入框模糊查询方法
12-13
本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码，供大家参考，具体内容如下 原理：原生js的indexOf() 方法，该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或...
vue使用js-audio-recorder实现一句话识别功能
07-14
vue使用js-audio-recorder实现一句话识别功能：以vue前端框架+腾讯云语音识别为基础，实现客户端长按录音，获取语音转换编译出来的识别码，传给后端去腾讯云语音识别库去换取识别回来的文本尽心客户端的文本查询！...
vue环境下基于contenteditable实现高度自适应多行文本域（div模拟<textareaa>）
wenmin1987的博客
12-25 1637
1、在web应用中，常用的多行文本输入&lt;textarea&gt;,满足了我们绝大部分的需求，唯一不足之处就是文本高度不能随内容自适应，如果需要高度自适应需要通过js脚本实现 2、div有天然的高度自适应，在加上个contenteditable属性，就可以变成一个文本内容自适应的多行文本输入框    &lt;div contenteditable="true"&gt;&lt;/div&gt...
Vue-表单输入绑定
weixin_41989717的博客
09-20 121
表单输入绑定 用v-model指令在表单,及元素上创建双向数据绑定。 他会根据表单控件类型自动选取正确的方法来更新元素。 v-model会忽略所有表单元素的value、checked、selected、attribute的初始值，总是将vue实例的数据作为数据来源。 通过JavaScript在组件的data声名初始变量 1.单行文本框 <div id='app'> <!-- v-model="stu.username"绑定在stu对象的username属性上 --
JS，Vue读取TXT文本，分段展示,匹配换行
前端菜鸡的博客
05-09 9745
<input type="file" @change="loadTextFromFile"> loadTextFromFile(e){ const file = e.target.files[0]; const reader = new FileReader(); reader.onload = e => th...
vue2 el-input type=textarea disabled怎么修改placeholder颜色
06-08
对于 `type='textarea'` 的 `el-input` 组件，你可以通过下面的 CSS 代码来修改禁用状态下的 placeholder 颜色： ```css .el-input.is-disabled textarea::-webkit-input-placeholder { color: #999; /* 你想要的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佳斌

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值