wxml input

已于 2022-03-30 17:38:42 修改
阅读量716 收藏 1
点赞数
文章标签： 微信小程序
于 2022-03-30 17:37:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65727732/article/details/123852237
版权

wxml制作input下划线输入框
wxml

姓名：

部门：

日期：

wxss
.inputtext{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
margin-top: 40rpx;
margin-left: -10rpx;
border-bottom: 1px solid gray;
}
.inputtext1{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.text{
margin-top: 40rpx;
}
.text1{
margin-top: 40rpx;
}
.text2{
margin-top: 40rpx;
}
.m1{
display: flex;
flex-direction: row;
margin-top: 40rpx;
margin-left: 0rpx;
color: #000;
}
.c1{
padding-top: 100rpx;
font-size: 28rpx;
color: #696969;
padding-left: 20rpx;
}

样式：在这里插入图片描述

weixin_65727732
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信小程序--模板与设置WXML
m0_53154393的博客
08-08 876
微信小程序WXML模板的设置与应用
小程序input数据双向绑定实现方法
12-13
我们都知道 vue 中可以使用 modal 来实现 input 内容数据的双向绑定。 小程序好像没有提供相应的方法支持，就需要我们自己写了。 原理 很简单，在 input 上先绑定需要取值的变量，如这个变量名是 name，然后再定义一个用于指向变量名的属性 data-modal 这个属性值设置为 name，在 input 的绑定方法中将这个属性值取出，就会知道这个 input 绑定了哪个变量，然后再将 input 的当前值赋给这个变量即可。 实现 wxml <input id='name' name="name" type='text' value='{{name}}' <!--
微信小程序input控件
Dax1_的博客
09-25 2049
首先主页面中将登录的样式进行了简单展示和使用，代码如下： <!--如果在同一个form表单中创建了多个input输入框，可以给给每个输入框， 创建自己的name=“userName”属性，可以区别哪个输入框，并通过添加 属性提交：bindsubmit="方法名" 重置：bindreset="方法名"， 达到清除输入框内容的目的 js文件中的用法，e.detail.value.userName.length--> <view class="itemView">用户名： &lt.
微信小程序——输入框input
weixin_58963766的博客
07-08 5114
编写时为方便，写的一般是changeContent（），但这是缩写了，全部应该写changeContent：function（），也就是如图所示的方式。从展开的可以发现，（）是人家function的，所以自定义的事件的名称为changeContent。当输入框的内容发生变化时，通过事件对象 e 的 detail.value 属性可以获取到最新的输入框内容。可以结合下图，通过按路径查找的方式理解这句代码：通过不断修改输入文本框的内容发现，detail中包含的value的值在随着文本框内容变化而变化。
微信小程序 清空input内容
Timor的博客
02-12 8287
wxml文件如下：&lt;input style='border:solid 1px;' type='number' value="{{input_code}}"/&gt;&lt;button bindtap='click' type='primary' style='width:100px;margin-top:20px;'&gt;清空&lt;/button&gt;js文件如下：Page({ ...
微信小程序开发初学：输入框 - input
Dae_Lzh的博客
01-27 1万+
输入框。 input具有的属性 value 类型：String 默认值：无 输入框内的初始内容 type 类型：String 默认值：text 输入内容的类型 type属性的合法值 （1）text：输入文本 （2）number：输入数字（弹出数字键盘） （3）idcard：输入身份证（弹出身份证输入键盘） password 类型：boolean 默认值：false 是否为密码类型（输入内容显示为圆点） placeholder 类型：String 默认值：无 提示词 placeholder-class 类型：
【微信小程序】基础篇 -- WXML 模板语法 - 事件绑定 -- tap & input （十）
JMFive的博客
02-27 2915
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第10篇文章;今天开始学习微信小程序的第五天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。在一起学习小程序里事件怎么绑定之前，首先先来了解一下什么是事件？事件是渲染层到逻辑层的通讯方式。
[微信小程序]使用input组件实现简单的输入框功能—————（2020.2.16学习笔记）
qq_37704442的博客
02-16 3957
在之前的文章中，我们谈过用导入的方式实现搜索框（诺，这是这篇https://blog.csdn.net/qq_37704442/article/details/103500904)，那篇文章实现搜索框的原理，就是使用了input组件，当然，今天要实现的输入框，虽然比搜索框要简单，但同样也是用input组件实现的，所以，介于input组件如此重要，我们有必要在开始之前认识一下input组件 inpu...
微信小程序-----通用获取输入框的值
每天都想吃好吃的
09-09 1914
3. 在事件处理函数中，通过e.detail.value获取输入框的值，并进行相应的处理。可以将其存储到数据对象中，或者进行其他操作。1. 在WXML中，使用标签创建一个输入框，并设置一个唯一的id属性。通过以上步骤，可以在微信小程序中获取到输入框的值，并进行后续的操作。2. 在JS中，定义一个事件处理函数，用于获取输入框的值。
微信小程序 (十七)input 组件详细介绍
01-21
wxml <!--style的优先级比class高会覆盖和class相同属性--> <input class=input type=number placeholder=请输入账号 placeholder-style=color: red bindinput=listenerPhoneInput /> <view
微信小程序实现简单input正则表达式验证功能示例
11-27
index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> 输入结果：{{result}} index.js文件 Page({ data:{ result:'' }, check:function(e){ var regLowerCase=new RegExp...
微信包含视图（wxml和wxss）和逻辑(js)的组件优化实例.rar
07-10
微信包含视图（wxml和wxss）和逻辑(js)的组件优化实例，微信小程序组件优化方案的演示源代码，做法分三步： ...　在子组件的input框中输入内容，父容器中显示input的内容，父容器中点击清空按钮后子组件input内容清空。
JS+正则表达式验证实例.
03-29
JS+正则表达式验证实例.三种验证模式 验证各种信息
微信小程序—获取input框内的值
Poppy_LYT的博客
08-19 525
微信小程序—获取input框内的值 1、wxml页面：input框内绑定一个bindinput，键盘输入时触发 <input bindinput="keyWord" class="search" placeholder="搜索电影" /> 2、js页面： data: { keyWord: '' }, keyWord: function (e) { console...
微信小程序之 获取input框输入值
热门推荐
gyueh的博客
08-26 1万+
第一种：bindsubmit方法 注意*： 1.使用form里面定义bindsubmit事件 2.bindsubmit事件需要配合button里面定义的formType="submit" 操作 3.设置input的name值来获取对应的数据 wxml代码如下： <form bindsubmit="formSubmit"> <input type="text" name="name" class="content" placeholder="请输入司机姓名" /> <in
微信小程序输入框顶起页面相关笔记
xcgljgq的博客
05-29 535
wxml：为input框增加属性 adjust-position = "{{false}}" (用于取消键盘自动顶起整个页面) ，bindfocus="onFocus" (监听键盘激活事件)，bindblur="onBlur"(监听键盘收起事件)；js：在data里增加属性：isFocus: false, (用于绑定键盘状态) inputBottom : ' ', (用于动态调整输入框以及消息列表的bottom高度)解决方案：设置键盘不顶起页面。目标：输入框只顶起聊天内容，不顶起顶部页头部分。
wxml input输入框下划线
weixin_65727732的博客
04-06 506
border-bottom: 1px solid gray;这句是关键，底部边框，实线，灰色；
小程序入门第二课 — 组件与WXML语法
cchhllll的博客
04-15 920
组件、WXML语法
基于微信小程序的校园二手闲置物品交易平台的设计与实现
最新发布
No_Name_Cao_Ni_Mei的博客
05-05 780
本文主要介绍了基于微信小程序的校园二手闲置物品交易平台的设计与实现。随着互联网和移动互联网的快速发展，校园二手交易市场愈加繁荣，校园二手闲置物品交易平台应运而生。通过使用微信小程序进行设计与实现，可以为广大大学生提供一个方便快捷的二手交易平台。该平台主要包括以下几个功能模块：用户注册登录模块、二手物品发布与搜索模块、交易过程管理模块和评价与反馈模块。用户通过注册登录模块可以创建自己的账号，并完善个人信息。在二手物品发布与搜索模块中，用户可以发布自己的闲置物品信息，并通过搜索功能寻找感兴趣的商品。
微信小程序js文件里可以获取到wxml里input标签的值吗
06-09
1. 在wxml文件中给input标签绑定一个`bindinput`事件，如下所示： ``` <input bindinput="inputChange" /> ``` 2. 在js文件中定义`inputChange`方法，将input的值存储到页面的data中，如下所示： ``` Page({ ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值