uni-app进行小程序开发之加减输入框

开发需求:能输入数字的输入框,且可以通过两侧的加减按钮进行数值的增减,可以输入的数字范围限定为1到999


开发过程:

首先写一个带加减按钮的输入框,同时限定输入框内容仅限于数字,让用户不能输入其他字符


附带加减的输入框

然后给加减按钮加上点击事件,让用户点击时可以更改输入框内的数值


为了能改变输入框的数值,也需要加入一个变量,就不作截图了


加减方法的代码

之后为了让用户不能输入0,给输入框添加一个方法监听输入事件,如果用户输入了0,则使其变为1


输入监听


检测出输入0则变为1

最后给加减按钮增加点击限制,如果输入框内容为1或999则不能再进行对应的加减操作,防止出现超出范围的数值


顺便提醒用户,防止用户以为没点到而去重复点击

完成后全部代码如下


页面部分


方法以及数据部分
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容