【小程序】input输入框属性及上下左右居中的示例(图文+代码)

这篇具有很好参考价值的文章主要介绍了【小程序】input输入框属性及上下左右居中的示例(图文+代码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

属性 功能 示例

placeholder

输入框空时,提示文字  placeholder=“请输入用户名”
placeholder-style 输入框,提示文字的样式

placeholder-style=

"color:rgb(170,170,170);

margin-left: 20px;"

placeholder-class placeholder 的样式类 用class样式修改
cursor-spacing 指定的光标与弹出键盘的距离

cursor-spacing="50"

type

text:文本输入

idcard:身份证输入键盘

digit:带小数点的数字键盘

nickname:昵称输入键盘

password 密码格式
disabled 只读,禁用输入

disabled="false"

maxlength 最大输入长度,设置为 -1 的时候不限制最大长度 maxlength=“-1”
focus 获得焦点

focus="true"

在view中的垂直居中

display: flex;align-items: center;

在view中的左右水平居中

display: flex;justify-content: center;

官方文档:

input | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/input.html

二、实例1

微信小程序 上下居中,0.【小程序】,前端,html

    <view class="boxNumber">

        <view>¥</view>
        <view>
            <input type="digit" placeholder="请输入金额" placeholder-class="boxNumberInput" adjust-position="true">
            </input>
        </view>
    </view>

二、实例2,文本框和文本框组合

微信小程序 上下居中,0.【小程序】,前端,html

 文本框

微信小程序 上下居中,0.【小程序】,前端,html

wxml文件

<view class="text">
    <input type="text" required="required" placeholder="请输入手机号" placeholder-style="color:rgb(170,170,170);">
    </input>
</view>

 wxss代码文章来源地址https://www.toymoban.com/news/detail-608000.html

    .text {
        height: 60px;
        width:94%;
        margin: 0 auto;
        display: flex;
        text-align: center;
        justify-content: center;
        /* background-color:red; */
        margin-bottom: 10px;
    }

到了这里,关于【小程序】input输入框属性及上下左右居中的示例(图文+代码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序在ios端上下左右滑动以及底部滚动条的解决方案

    最近在写小程序,碰到一个非常棘手的问题,就是安卓没事,苹果手机上的页面能上下左右的滑动,不美观这里我理解为不兼容,本着有问题就去解决,苹果默认应该是滑动的,下面是解决方法 底部滚动条解决

    2024年02月04日
    浏览(152)
  • 微信小程序、uniapp使用touchstart和touchmove左右滑动删除。以及解决上下抖动问题。

    展示效果图直接上代码 如果要修改里面内容直接从content这个类修改就行。 直接复制粘贴就行。拿上直接用。 如果遇到滑动会导致上下抖动用这个解决。给最外层得一个view标签加一个样式。 这样的话滑动会有阴影,但不会抖动,可以尝试一下看看,如果哪位能人能解决,就

    2024年02月11日
    浏览(139)
  • Unity:鼠标【上下左右滑动时】控制相机【左右张望】和【上下抬头】

    相机旋转,看着是小事,但是却关系到用户的直观体验。旋转对了母慈子孝,旋转错了则翻江倒海。 鼠标左右移动时,控制相机左右转动 鼠标上下移动时,控制相机抬头低头 你可以在GPT里提问,他的回答也很给力,能转,但是都不符合人体的看东西的特点。 后来还是的自己

    2024年02月10日
    浏览(60)
  • echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合,X轴的颜色,X轴字体颜色,调整柱子颜色,调整小图标图例的大小和位置,鼠标

    本文已参与「新人创作礼」活动,一起开启掘金创作之路。 看图 欢迎大家指出文章需要改正之处~ 学无止境,合作共赢 欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

    2024年02月10日
    浏览(87)
  • 用css来实现上下左右箭头

       

    2024年02月12日
    浏览(68)
  • [Unity] Tilemap瓦片左右翻转(上下翻转)

    Tile(瓦片)左右翻转感觉是很常用的一个功能啊!看了一些教程都没有提及,心想难道要把每张Sprite再做一张对称的、再做成瓦片吗? 图片量x2 、瓦片量x2、不现实!一定有方法! 搜索了了半天没找到方法,结果自己偶然在奇怪的地方不一小心找到了~~ 记录一下! 菜单栏

    2024年01月22日
    浏览(46)
  • Flutter:自定义组件的上下左右弹出层

    最近要使用Flutter实现一个下拉菜单,需求就是,在当前组件下点击,其下方弹出一个菜单选项,如下图所示: 实现起来,貌似没什么障碍,在Flutter中本身就提供了弹出层PopupMenuButton组件和showMenu方法,于是开搞,代码如下: 直接使用showMenu也行,代码如下: PopupMenuButton运行

    2024年02月10日
    浏览(72)
  • vxe表格实现键盘上下左右方向键移动聚焦

    vxe 表格分为 vxe-table 一般表格和 vxe-grid 高级表格,两者之间的区别我就不说啦,我们来实现这两种表格用键盘按动上下左右方向键达到移动聚焦的效果。话不多说,上正文!!! 首先在标签放入这两个事件: 主要是利用vxe表格内置的@cell-click事件,来监听点击单元格的行号

    2024年02月07日
    浏览(82)
  • Unity 控制摄像机镜头的上下左右移动

            private float FollowPosx,FollowPosy;     private float moveAmount=5;   //控制镜头的移动速度     // Update is called once per frame     void Update()     {         if (Input.mousePosition.y Screen.height * 0.9)//如果鼠标位置在顶部,就向上移动         {             FollowPosy += moveAmount * Time.delta

    2024年02月11日
    浏览(50)
  • [Python中矩阵上下左右翻转(np.flip)]

    [Python中矩阵上下左右翻转(np.flip)] 现代编程语言和相关库的发展,使得数值计算和数据处理变得更加便捷和高效。在Python中,NumPy库是众多数据科学和工程应用领域的重要支撑之一。其中,np.flip函数可以用于进行矩阵的上下左右翻转操作,是我们在处理图像、信号、物理模

    2024年02月12日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包