微信小程序input组件改变初始光标与placeholder的位置

已于 2023-09-08 10:50:04 修改
阅读量1.1k 收藏 2
点赞数 2
文章标签： 微信小程序 小程序
于 2023-09-08 10:47:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lifeiyang313/article/details/132755495
版权

        最近在使用微信小程序input组件时，由于设置了input的样式如下，导致初始光标看着不协调，想把光标向右挪动一点。

看了网上的方法使用text-indent:10rpx，发现光标位置未改变，只改变了placeholder的位置

最后使用padding-left：10rpx；实现了需求，不过记得使用box-sizing:border-box，否则整体样式会发生改变

lifeiyang313
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序中input组件的type属性3个值的作用
03-29
本文作者：一斤代码，来自授权地址 input组件是小程序的内容输入框组件，通常是这样来使用的： <input type="text" placeholder="输入点内容吧" /> 从文档中可以看到，type属性有三个值：text, number，digit。当我们使用这三个属性值，并在微信web开发者工具中查看效果的时候，其实是看不出来有什么差别的。但是如果在真机上进行预览，就能清楚的了解这三个值得功能区别了： 1) text 全键盘模式输入 <input type="text" placeholder="输入文本内容" /> (此图片来源于网络，如有侵权，请联系删除! ) 全键盘 2) n
【taro】taro微信小程序input在苹果手机上光标聚焦不对的解决办法
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
04-01 1570
问题原因 我打开我的安卓机测试taro的input标签，没问题~，但是我旁边的小组长打开他的buliangbuliang的苹果手机使用taro中的input，聚焦的时候，光标自动跑到最左边！！ 解决办法 俺查看了taro文档，发现了cursor的属性，添加之后，正常了~ 代码: //props是input框输入的值 <AtInput key={"1"} cursor={props.length} type="text"/> 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流qq群:8370515
微信小程序input搜索框，placeholder的位置和光标的位置
热门推荐
weixin_37787294的博客
08-02 1万+
如图： 光标的位置直接在input下设置 input{ width: 100%; height: 60rpx; background-color: white; font-size: 24rpx; text-align: center;//光标居中 } “搜索“两字的位置有两种方式： 1.placeholder-class //wxml <inp...
微信小程序input组件
Jerry杰的博客
08-21 2238
输入框：该组件是原生组件，使用的时候要注意相关的设置 　value：类型　　字符串　　输入框的初始内容 type：类型　　字符串　　input类型 属性值：text　　文本输入键盘 number 数字输入键盘 idcard　身份证输入键盘 digit　　带小数点的数字键盘 password：类型　　布尔　　是否是密码类型 placeholder：类型　　字符串　　输入框为空时占位符 placeho...
解决微信小程序 输入框获取焦点光标偏移
Julie_Go的专栏
07-27 2695
如题：页面滚动后，点击输入框获取焦点，光标位置发生偏移 解决方法：将页面元素整体放在<scroll-view></scroll-view>标签里 ，给<scroll-view设置固定高度解决了
微信小程序如何获取 input或者textarea光标所在位置
weixin_37935578的博客
02-02 4736
微信小程序 中如何获取 input或者textarea光标所在位置已解决 已解决 需要将语音输入直接插入文字中间，需要下标把文本分成两部分，要光标下标才能继续。通过在textarea上绑定bindinput发现 返回数据中有一个对象 cursor 正是光标的所在位置下标 .wxml文件相关代码 <textarea bindinput="getValue" placeholder="请输入内容...
【微信小程序】input输入框（87/100）
lichong951的专栏
07-18 4866
简单的点胜过复杂的高明
微信小程序 textarea输入框内文字，从中间删除快的时候，光标会从中间跳到最后位置
yongyafang123的博客
02-01 1737
小程序 输入框 删除光标问题
用css改变input光标的3种方法
qq_43248623的博客
04-01 5468
用css改变input光标的3种方法
使用原生方法设置输入框的光标位置
m0_64564920的博客
04-05 3926
前言 前段时间碰到一个需求，在一个原本有默认值的``input``输入框中，希望得到的效果是**页面一进去就获取光标**，让用户可以输入内容。但是当我使用 ``focus``获取光标之后，却发现**在文字的最前面**，哎？这可不太对劲啊。不应该在文字的最后面吗？怎么跑到最前面了呢？
微信小程序 input输入框控件详解及实例（多种示例）
01-19
微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件，输入框在程序中是最常见的，登录，注册，获取搜索框中的内容等等都需要，同时，还需要设置不同样式的输入框，今天的代码中都要相应的使用。 首先主页面中将登录的样式进行了简单展示和使用， 代码如下： <!–index.wxml–> <!--如果在同一个form表单中创建了多个input输入框，可以给给每个输入框，创建自己的 name=“userName”属性，可以区别哪个输入框，并通过添加 属性提交：bindsubmit=方法名 重置：bindreset=方法名，达到清除输入框内容的目的 js文件中的用
微信小程序 input输入框详解及简单实例
11-28
微信小程序输入框input 相关文章： 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input  微信小程序 form 微信小程序 checkbox 实现效果图： 微信小程序输入框input 属性名 类型 默认值 说明 value String   输入框的内容 type String text input的类型，有效值：text,number,idcard,digit,
微信小程序 (十七)input 组件详细介绍
01-21
input输入框使用的频率也是比较高的。。。样式的话自己外面包裹个view自己定义。input属性也不是很多，有需要自己慢慢测，尝试 主要属性： wxml <!--style的优先级比class高会覆盖和class相同属性--> <input class=input type=number placeholder=请输入账号 placeholder-style=color: red bindinput=listenerPhoneInput /> <view
微信小程序input框中加入小图标的实现方法
08-27
主要介绍了微信小程序input框中加入小图标的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序实现简单input正则表达式验证功能示例
11-27
本文实例讲述了微信小程序实现简单input正则表达式验证功能。分享给大家供大家参考，具体如下： 1、效果展示 2、关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> ...
微信小程序input点击输入时placeholder位移
The_zero_close的博客
03-29 1743
input使用了box-sizing: border-box;样式的同时添加了上下内边距（padding）或上下外（margin），猜测是border-box下的placeholder获得焦点之后使上下边距失效了。微信小程序原生组件input文本输入框， 点击使输入框获得焦点后，placeholder占位符文字位置会向上编移，可以把box-sizing:border-box去掉。
微信小程序输入框光标从中间删除跳到最后bug解决
weixin_45145119的博客
02-25 2427
原因：双向绑定导致数据发生更新导致光标跑到最后。 1.使用textarea标签， 2.将双向绑定v-model改为:value绑定数据 3.重新定义一个变量，在input事件里面把e.detail.value复制给这个变量 4.在提交的时候把重新定义的变量赋值给:value绑定的变量 5.清空时把这两个变量都清空 ......
解决 微信小程序 input错位
gongzuoyongde的博客
12-16 3867
解决微信小程序的input组件位置错乱的问题
微信小程序input placeholder
最新发布
07-25
微信小程序中，可以通过设置 `<input>` 组件的 `placeholder` 属性来显示输入框的占位提示文本。例如： ```html <input placeholder="请输入内容" /> ``` 这样设置后，输入框会显示 "请输入内容" 的提示文本，一旦用户开始输入，提示文本会自动消失。你可以根据需要自定义占位提示文本来引导用户输入相应的内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值