textare 不显示placeholder的问题

最新推荐文章于 2024-09-20 14:49:51 发布

原创最新推荐文章于 2024-09-20 14:49:51 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

4 篇文章

订阅专栏

本文记录了一个关于HTML中<textarea>元素的占位符（placeholder）不显示的问题及解决方法。首次加载页面时，<textarea>内的占位符无法显示，原因是<textarea>标签间存在换行或空格。通过删除这些空白字符，可以确保占位符正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个小失误找了半天，现在记录下来，希望能帮助大家，先上代码

<textarea class="form-control diff-textarea" placeholder="输入会员卡使用特权"  id="description" rows="6">
</textarea>

上面是一个普通的textarea。

现象是第一次打开页面时，无论怎么都不显示placeholder。感觉textare中有东西占了位置。看下面的截图

把这行东西删掉之后 placeholder就出现了。而且第二次以后打开页面就都正常了。

找了很久，发现是因为<textarea>与</textarea>换行造成的！！！

太坑了

解决方法<textarea></textarea> 之间不能换行，不能有空格！！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

衣襟晚照

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uniapp - 手动设置 input / textare 输入框焦点并将光标移到末尾，也支持 uview 组件库 u-input 输入框 / u-textarea 文本域（全平台兼容的通用解决方案）

资深程序员

07-21

7349

uniapp小程序h5网页安卓苹果app设置input输入框textare多行输入框的焦点，uniapp设置输入框input焦点，uniapp手动实现让input文本框聚焦，uniapp如何让输入框input手动聚焦，uni-app输入框手动设置焦点，input手动获取焦点，uniappinput自动聚焦，uniapp每次手动让input输入框获取焦点，uniapp自动获取焦点并将光标移到末尾，uniapp给textarea多行文本框设置获取焦点，uniapp获取输入框焦点后怎么把光标移到最后，unia

css多行文本垂直居中

09-27

css 多行文本垂直居中显示，兼容各大浏览器！

参与评论您还未登录，请先登录后发表或查看评论

textarea 元素的 placeholder 属性不显示

weixin_43146793的博客

03-17

997

textarea中的placeholder不显示的原因，主要是因为中间有空格。 <textarea name="userMsg" placeholder="请在此填写您的意见或建议"></textarea> 注意前面没有空格，如果是 <textarea name="userMsg" placeholder="请在此填写您的意见或建议"> &a

（二）textarea中placeholder不显示

cccyt123的博客

08-02

476

最近跟着大牛学习搭建接口自动化测试平台，接触到一些前端知识，在学习的过程中遇到了一个问题。我需要在页面添加一个输入框，输入框默认显示简短的提示文字，但是在我添加好placeholder属性后，运行发现输入框里显示提示文字。 {# 添加多行文本框#} <textarea id="tucao_input" cols="45" rows="9" placeholder="匿名吐槽专用，点击‘呸’ 即可怒喷开发者！"

textarea placeholder 的提醒不显示

aweiwei的博客

02-15

380

<textarea></textarea> 之间不要加空格

textarea placeholder 不显示或初次不显示的问题

meng_xiaohua的博客

03-04

346

<textarea></textarea>标签之间不要有空格或者换行符等！！！例如： <textarea name="textarea" rows="5" cols="20" placeholder="请输入信息"> </textarea> 或者 <textarea name="textarea" rows="5" co...

textarea显示行号

02-24

在实际项目中，你可能还需要考虑兼容性问题，因为不同的浏览器可能对某些CSS属性或JavaScript特性支持不同。此外，对于大量文本或者实时编辑的情况，优化性能也是必要的，比如通过节流或防抖函数来限制行号更新的...

【javaweb】textare没有value属性的情况下添加默认值

weixin_43210113的博客

11-18

640

〇、前情提要 textare里添加默认值，发现没有value属性参考： textarea 添加默认值value https://blog.youkuaiyun.com/dmedaa/article/details/91459272 一、问题分析原来代码 <div class="form-group"> <label class="font-weight-semibold" for="media_info">媒体说明/备注</label> <textarea cl

uniapp textare 怎么设置字体居中

05-15

<textarea class="textarea" placeholder="请输入内容"> .textarea { width: 100%; height: 120rpx; font-size: 32rpx; text-align: center; border: none; outline: none; } ``` 其中，`text-align` ...

微信小程序中textare我想获取选中的文本怎么实现？

最新发布

10-28

<textarea ref="myTextarea" placeholder="请输入内容"> Page({ data: {}, bindSelect: function(e) { let selectedText = e.detail.value; // 获取到选中的文本 console.log('用户选中的文本:', selected...

textarea中的placeholder不显示

柚稚的博客

03-01

230

<textarea placeholder="评论留言" id="c_content"> </textarea> 这种写法呢，会在产生空格，所以采取写在一行的写法 <textarea placeholder="评论留言" id="c_content"></textarea>

textarea placeholder不显示

longe20111104的博客

10-20

416

textarea placeholder不显示: textarea 的 placeholder 属性值不显示的原因可能是 <textarea>与</textarea> 之间存在空格或者换行

textarea不显示placeholder的内容

miemiem_的博客

10-19

779

原因：textarea开始标签和闭合标签之间有换行或者空格。

为什么textarea不显示placeholder,而且焦点不在输入框最左边

qq_42444795的博客

08-21

449

项目场景：提示： textarea标签不显示placeholder,而且焦点不在输入框最左边情况如同这样 https://codepen.io/studysyl/pen/PoNGrda?editors=1010 问题描述：本来是想要显示textarea里边的placeholder="简介"，但是页面并没有刷新出来，但是把左边的空格去除之后就能显示了。 <textarea id="brief" name="brief" autofocus="autofocus" class="form-

a-select vModel时placeholder不显示问题

成长的博客

06-18

1080

问题描述：select 组件绑定了v-model和placeholder，v-model的value默认值为空字符串或者null时，select组件的placeholder属性不显示。placeholder是当前组件值为空时显示的替换文本，只有值为空的时候才会显示。因为在ant-design-vue中，当组件绑定了v-model且绑定值初始化时，值不再是空，即时初始化值为’'也视为有值，所以placeholder自然就不会显示。其实两个方案是一个原理，初始化成undefined未定义就好啦。

textarea的placeholder穿透问题

qq_41818857的博客

09-21

498

在开发者工具调试的时候还是好好的，ios系统也是好好的，一到安卓手机上就会出现穿透问题，调样式，调层级都不管用。解决办法： 1、通过一定条件去判断隐藏还是显示文本框，比如我是在弹窗的时候出现这个问题，所以我就判断当弹出层出来的时候隐藏文本框，当弹出层消失的时候出现文本框。 2、如果不是弹窗的情况，可以使用cover-view组件来代替被placeholder穿透的元素。 ...

textarea文本框的placeholder文字换行

个人博客

01-13

6877

textarea文本框的placeholder文字换行一、问题描述二、原生实现三、vue中实现一、问题描述 textarea为前端常用的文本输入框，有时候需要placeholder的文字提示更加友好，那样提示文字可能就需要换行。二、原生实现原生textarea的实现方式如下： <textarea rows="6" style="width: 300px;padding: 0;" placeholder="标题
正文
结尾" > </textar

Antd框架中的Select组件placeholder不显示

m0_66706006的博客

09-20

801

解决antd框架中的Select组件placeholder不显示的问题

JavaScript要求在textare 输入框显示密文

05-24

要在textarea输入框中显示密文，你可以使用JavaScript将用户输入的明文转换为密文，并将其显示在textarea中。这可以通过以下步骤实现： 1. 获取textarea元素并将其存储在一个变量中。 ```javascript const ...