uniapp 动态设置input的type会使样式失效

最新推荐文章于 2024-08-05 19:34:03 发布
最新推荐文章于 2024-08-05 19:34:03 发布
阅读量491 收藏
点赞数
分类专栏： uniapp开发 文章标签： uni-app 前端 uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42249532/article/details/134262422
版权 
<input :type="inputType"  class="uni-input" placeholder="密码" placeholder-class="place-class" v-model="password"/>

以上写法会使样式失效

解决方法：使用v-if

<input type="password" class="uni-input" placeholder="密码" placeholder-class="place-class"
v-model="password" v-if="passwordType" />
<input type="text" class="uni-input" placeholder="密码" placeholder-class="place-class" v-model="password" v-else />

南风知我意zz
关注
专栏目录
uniapp - [全端兼容] 手机数字键盘没有小数点，当 input 输入框的 type 属性设置 number 后，手机系统的软键盘无法输入小数点和符号问题（此方案 uniapp 全端全平台适用）
高级前端工程师
05-13 1万+
uniapp键盘无法输入小数点符号，uniapp键盘没有小数点，uniapp手机软键盘没有小数点，uniapp input设为number时键盘没有小数点，uniapp小程序调取数字键盘没有小数点解决办法，uniapp手机网页h5 安卓app 微信小程序 nvue解决键盘无法输入小数点的问题，uniapp苹果ios键盘上没小数点.怎么办，uniapp input number无法输入小数点，uniapp IOS数字键盘没有小数点，uniapp数字键盘为什么没有小数点，uniapp小程序app h5 inpu
uniapp的单选框，type=‘radio‘用不了？
tianxingege_的博客
09-04 1233
今天发现了一个新大陆，因为今天的任务有涉及到单选按钮，按照原来的思维想法，我敲了以下代码 <input type="text" value="请输入地址" /> <input type="radio" value="郑州" /> 结果发现发现竟然没有单选按钮，变成了输入框？ 后来我进去官网搜了一下发现uinapp的input是没有radio 类型的，uniapp的单选框有radio 标签还有radio-group单选按钮组，详见如下：官方文档 单项选择器，内部由多个 组成。通过
uniapp--动态设置input的type属性会使input样式失效
Junikusa的博客
07-27 2075
uniapp--动态设置input的type属性会使input样式失效
UNI-APP_移动端input输入框（type=“number“）输入数字的时候，不能输入小数点问题
最新发布
小歪博客
08-05 725
UNI-APP_移动端input输入框（type=“number“）输入数字的时候，不能输入小数点问题
uni-app input之placeholder-style、placeholder-class样式未生效
qq_19249021的博客
04-07 4343
1. 分析问题 其实大部分都是字体大小未生效，颜色是生效的。 <!-- html --> <input class="pinput" type="text" placeholder="请输入账号" placeholder-class= "phsy" /> .phsy { font-size: 20px !important; color: #999 !important } 2. 解决问题 rpx单位换成px单位，截止目前2022年4月7日1
uniapp uview u-input在app(运行在安卓基座上)上不能动态控制type类型(显隐密码)
Xiang_Gong_Ya_的博客
12-01 824
而在运行到安卓基座时无法动态控制 这时使用v-show直接控制问题解决
uni-app 实现input:type=file 上传,并实现表单提交
会飞的咕咕鱼的博客
07-27 1万+
问题描述 最近在做一个把现有app转成H5的项目，关于上传图片的功能，服务端并未提供上传文件接口。且保存接口需要上传文件与其他信息通过表单提交。表单提交简单我们前端提交formData数据就好了，但是这个上传就有点鸡肋了，uni-app的input type有效值只有4个（text,number,idcard,digit）,这就决定了uni-app 官方提供的上传api是无法满足当前场景的。 解决步骤 1.页面渲染完毕后，动态创建一个input：type=file的DOM元素 2.提交时，new一个
u-view2.0 uniapp input 或者textarea的placeholder-style设置失效， 解决办法！！ 碾压网上搜到的所以方法！！！
柑橘乌云_
06-12 4094
设置placeholder-style属性发现怎么设置都无效，此时更有趣的事情发生了；然后在onload里面设置延时器去显示这个input。查了一些资料，原因是因为动态创建元素的原因，解决办法：用v-if去控制显隐。-ui v1，情况都一样）
input中type=“checkbox“样式突然不展示加改变原有样式解决方法
weixin_33210601的博客
08-18 795
讲解了input中type="checkbox"样式突然不展示的原因，加上如何把原有的样式改成圆形
6位验证码输入框.zip
03-31
解决方法是在WXSS样式表中，为每一个输入框设置`cursor-spacing`属性为一个极大的值，例如9999，这会使光标远离可视区域，从而达到隐藏的效果。同时，可以设置`cursor`属性为`none`，确保在所有环境下光标都被隐藏。...
小程序日记：基础篇
qq_44719515的博客
06-21 3598
文章目录一、全局配置配置项1、pages2、window3、tabBar3.1：list的属性二、页面配置 page.json配置项配置示例三、sitemap 配置配置项rules配置示例WXML语法四、数据绑定1、简单绑定1.1、内容1.2、组件属性(需要在双引号之内)1.3、控制属性(需要在双引号之内)1.4、关键字(需要在双引号之内)2、运算2.1、三元运算2.2、算数运算2.3、逻辑判断2.4、字符串运算2.5、数据路径运算3、组合3.1、数组3.2、对象五、列表渲染1、wx:for2、block
H5移动端安卓机input上传附件点击无反应问题及其他安卓与webview兼容性问题、
qq_45108245的博客
01-09 8858
H5移动端安卓机input上传附件点击无反应问题及其他安卓兼容性问题一、问题二、查找原因 一、问题 最近在赶项目的时候，做了H5并嵌入webview中。发现点击H5中 input type=“file” 标签 不能打开android资源管理器。 // An highlighted block <input type="file" accept="image/*;capture=camera">， IOS手机中，可以直接呼起相机和相册； 安卓手机则不行，部分浏览器没问题； 二、查找原因 网上一查
uni-app中placeholder-style存在部分不起作用问题
qq_42129750的博客
01-06 6527
最近在用vue写前端页面时出现了，使用form表单组件Input设置placeholder字体时出现在模拟端能够成功显示，在手机真机端却不能成功显示的问题，然后看了找了好多博客也没看到，自己捣鼓了一下发现网上好多的都是不太准确的。 <input type="text" style="font-size: 34upx;" placeholder-style="font-size:16px;" ...
uniapp input 动态修改值
qq_28641023的博客
07-10 732
2、只有首次修改 变动。
uni-app 输入框类型
素味平生的博客
04-09 7101
文本输入框 <input type="text" v-model="form.account" placeholder="请输入用户名"/> 数字输入框 <input type="digit" v-model="form.age" placeholder="请输入年龄"/>
使用uniapp开发修改样式无效修改方案
ZhouXin_0819的博客
06-28 2366
如果是picker 和 picker-view组件元素定位不到 在微信开发者工具中有些标签会转译成别的标签就要对标签的样式进行重写。在微信开发者工具如果是picker 和 picker-view组件元素定位不到，要去查看官方文档有没有配置样式的配置项。我们通常会遇到这种情况在H5和App修改了有效果在微信开发者工具却没有效果,只需要加入如下配置（与data同级）
uniapp-input组件
热门推荐
weixin_44011462的博客
05-02 1万+
co-input组件 参数 默认值 说明 textNmae 无 输入框左边文字 border false 输入框下方横线 textNmae 无 输入框左边文字 textNmae 无 输入框左边文字 textNmae 无 输入框左边文字 textNmae 无 输入框左边文字 ...
uniapp小程序踩坑input样式问题
limuu09的博客
04-29 1107
问题：cursor设置正常展示，但是设置placeholder时使用官方文档提供的属性会有问题。解决：直接使用类名，注意style不要加scoped，新写一个，如果还不成功就用深度选择器。操作前样式没修改成功，但是输了内容删除之后样式立即生效。需求：需要给input的placeholder及光标设置特定样式。
uniapp 小程序 input type="digit" 不生效
06-03
如果 `input` 标签的 `type` 属性设置为 `digit`，但是在小程序中输入非数字字符时仍然可以输入，那么可能是因为 `uni-app` 在编译时会将 `input` 标签的 `type` 属性转化成小程序的 `type` 属性。但是，在小程序中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值