placeholder失效的原因之一！！！

最新推荐文章于 2023-05-08 18:00:42 发布
最新推荐文章于 2023-05-08 18:00:42 发布
阅读量665 收藏
点赞数 3
分类专栏： 前端坑 文章标签： placeholder失效的原因之一
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinping7he/article/details/94176662
版权

这是我原来写的代码：

 <el-input placeholder="姓名/用户名"  v-model="condition">

condition : '  ',

有发现什么猫腻吗？

v-model绑定的变量值是空格，该空格就是使placeholder的值隐藏的罪魁祸首！

是时候亮出我的五十米大刀了：

condition:null,

perfect!

xinping7he
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
element踩坑之el-select中的placeholder属性不显示
a_bald_girl的博客
07-23 5572
直接上图 咱想要这种效果 但现实却给了这种效果 明明ui代码一模一样 <el-input placeholder="请输入内容" v-model="input3" class="input-with-select"> <el-select v-model="select" slot="prepend" placeholder="请选择"> <el-option label="餐厅名" value="1"></el-option>
value为空时，不显示placeholder
wuhe1060134228的博客
04-12 848
前端或小程序中input组件中，value为空时，显示为空。 空在组件里面代表有值，如果想显示placeholder，需要判断当value为空时设置为undefined，就可以显示placeholder了。
vue项目中使用element的el-input 导致safair中input的placeholder行高失效
cqqorcq的博客
04-30 392
//解决safair中input的placeholder行高失效 input{ line-height:1!important; }
关于 设置 placeholder 无效解决办法
weixin_44378370的博客
07-13 2918
一、设置placeholder的方法 placeholder属性用来设置控件内部的提示信息 　　 改变placeholder的样式： input::placeholder { color: red; font-size: 22px; } 二、各浏览器样式兼容设置 1、针对谷歌浏览器的设置方式： input::-webkit-input-placeholder { color: red; font-size: 22px; } 2、针对火狐浏览器的设置方式： input::-moz-placeholder {
antd form 下placeholder不生效的错误
summermmmm的博客
11-30 154
问题原因：name不能有两个下划线，只有一个或者无下划线都是正常生效。 只有一个下划线或者没有下划线时就正常显示了。。。 大坑。
ElementUI中修改el-input__inner等标签样式不生效问题
weixin_38146633的博客
01-07 2216
谷歌浏览器在项目界面直接按F12，查看哪个样式在起作用，在Vue项目里重写对应的css样式,加上自己定义的class,例如下图的.loginInput，使其只在本组件中起作用。否则会在项目里其他使用相同样式的内容中起作用。若是仍然不行就加上 ！importment。 参考： https://my.oschina.net/yxmBetter/blog/1506668 https://www.cnblogs.com/loveliang/p/13852742.html https://blog.csdn.net
ie9以下placeholder失效
06-19
placeholder属性的出现使input输入框不再单调，而且可以对用户做一个对输入内容的提醒或者指引，起到了很好的作用。但是 但是IE9及IE9以下不支持这个属性，这就让人很恼火呀，毕竟中国还有好多人用的是IE9及以下...
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
在实际开发过程中，我们可能会遇到一个常见问题，即当动态地给`a-select`的`option`赋值后，其`placeholder`属性失效，不再显示默认提示文本。这个问题通常出现在数据异步加载的情况下，比如从服务器获取数据并填充...
AngularJS入门教程之Hello World!
10-25
Yourname: <input type="text" ng-model="yourname" placeholder="World"> Hello {{yourname || 'World'}}! ``` - `ng-model`：用于创建双向数据绑定。此处创建了一个名为`yourname`的模型变量，并将其与`<input>`...
一行代码搞定UITextView的placeholder
04-04
源码UITextView-placeholder，分类已经写好,直接拿来用即可。 示例代码: UITextView *textView = [[UITextView alloc] init]; textView.font = [UIFont ...通过运行时绑定一个label属性,用来存放placeholder
jQuery实现的一个自定义Placeholder属性插件
10-25
- 对于不支持Placeholder属性的浏览器，插件需要创建一个自定义的提示信息，并能够将其显示和隐藏。 - 对于支持Placeholder属性的浏览器，插件不需要做任何处理，以实现渐进增强。 #### 6. 插件主体...
vue中input框用.number限制只能输入数字时不生效处理方法
qq_43532275的博客
03-28 1757
<el-input placeholder="请输入导航栏高度" v-model="addFileForm.height" @input="addFileForm.height =checkNum(addFileForm.height) " ></el-input> checkNum(data){ if(data){ return (data =Number(data.replace(/[^\d.%\\]/g,''/))...
input 的placeholder不显示如何解决
热门推荐
weixin_34146410的博客
09-26 1万+
写在前面：近期开始在整理一些东西，“一孕傻三年”的模式快要结束，但是脑袋瓜还是妥妥的记不住事情。总结一些自己平时踩过的坑，希望能给别人带来些许便利。 昨天在写input的时候，发现placeholder总是不显示。在谷歌模拟下，只看见显示了“年/月/日”，手机上白白的，什么也木有。这样的用户体验肯定是要被打死的！效果贴下： 遇见问题第一反应就得想办法解决问题。代码贴下： <div cl...
HTML5 input placeholder 颜色及修改失效的解决办法
zccmp20的专栏
02-14 1576
1.调整代码如下： input::input-placeholder{color: #bdbdbd ;} /* 有些资料显示需要写，有些显示不需要，但是在编辑器webstorm中该属性不被识别 */ ::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placehold...
解决input 中placeholder的那些神坑
weixin_34071713的博客
10-11 6000
**昨天后台小哥哥提到placehold无法显示问题，我这边总结一下，顺便写个小文章分享给大家。。** ============================================== 一、解决ie9以下input 无placeholder问题 解决方案一：jquery实现 当浏览器不支持placeholder属性时，...
vue项目解决IE9不支持placeholder
weixin_47473788的博客
09-28 299
简书大佬 vue项目解决IE9不支持placeholder https://www.jianshu.com/p/1c239e4c176c 通过vue的自定义全局指令 Vue.directive 来控制。 由于项目中使用到了elementUi ，所以以解决elementUi组件的input为例 <el-input v-support v-model="value" placeholder="请输入姓名"></el-input> 自定义指令代码 Vue.directive("s
placeholder在input中不生效
m0_55258023的博客
06-14 2360
placeholder在input中不生效
input点击后placeholder中的提示消息消失
MaggieWon
08-22 1万+
html中，placeholder作为input的一个属性，起到了在输入框中占位并提示的作用。 但是有一些浏览器，如chrome，当鼠标点击输入框时，placeholder的值不消失，只有输入数据才消失，会使前端用户体验大打折扣。 看了很多大神的方法，写了长长的js，看着有点吃力，就想到了下面这种最傻的方法解决了这个问题。 html代码： ?
记录：el-input需要自定义placeholder的情况下所出现的一些BUG
最新发布
Script_ssq的博客
05-08 683
在项目中UI给出了这一种必填输入框：需要在placeholder中增加必填星号且颜色为红色在使用中文输入法的时候，情况如下：并没有实际确认下去输入的内容，输入框的input和change事件监听不到用户正在输入。通过compositionstart、compositionupdate、compositionend三个事件对输入框进行监听compositionstart：用户输入开始，仅第一次触发compositionupdate：用户输入中，每次触发。
select中的placeholder失效
03-16
在HTML中，select元素的placeholder属性是不起作用的。这是因为placeholder属性只适用于文本输入框，而不适用于下拉列表。如果您想在下拉列表中添加默认文本，请使用option元素的selected属性来设置默认选项。例如： <select> <option value="" selected disabled>请选择</option> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> 在上面的代码中，第一个option元素被设置为默认选项，并且被禁用，以防止用户选择它。这样，当用户打开下拉列表时，会看到“请选择”这个文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值