返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue输入框输入任意内容返回数字的实现
  • 576
分享到

vue输入框输入任意内容返回数字的实现

2024-04-02 19:04:59 576人浏览 八月长安
摘要

本文主要介绍了Vue 输入框输入任意内容返回数字,具体如下: 输入任意内容只返回数字 // 提取数字 传入数字 export function changeEvent(item)

本文主要介绍了Vue 输入框输入任意内容返回数字,具体如下:

输入任意内容只返回数字


// 提取数字 传入数字
export function changeEvent(item) {
	let nums = item + "";
	if (nums === "") {
		nums = ""; // 空的话 直接返回空
	} else {
		nums = nums.replace(/[^\d|\.]/g, ""); // 提取出来 一定是数字
		if (nums.includes(".")) {
			// 包含小数点
			let strL = nums.substring(0, nums.indexOf("."));
			let strR = nums.substring(nums.indexOf(".") + 1);
			nums = strL + "." + strR;
		}
		// else {
		// 	// 不包含小数点
		// 	nums = nums.replace(/[^\d|\.]/g, ""); // 提取出来 一定是数字
		// }
	}
	return nums;
}

// 离开输入事件 
export function blurEvent(x, y) {
	if (x === "") {
		y.manualScore = "";
	} else {
		x = x + "";
		let nums;
		if (x.includes(".")) {
			// 包含小数点
			nums = x.replace(/[^\d|\.]/g, ""); // 提取出来 一定是数字
			let strL = nums.substring(0, nums.indexOf("."));
			let strR = nums.substring(nums.indexOf(".") + 1);
			strR = strR.replace(/\./gi, ""); // 去除多余小数点
			if (strL === "" && strR === "") {
				nums = "0"; // 有小数点,但左侧右侧都为空 默认为0
			} else if (strL === "" && strR !== "") {
				// 左侧为空 右侧不为空 小数
				nums = "0." + strR;
			} else if (strL !== "" && strR === "") {
				// 右侧为空 左侧不为空 整数
				nums = strL;
			} else if (strL !== "" && strR !== "") {
				nums = strL + "." + strR;
			}
		} else {
			nums = x.replace(/[^\d|\.]/g, ""); // 提取出来 一定是数字
		}
		let z = nums * 1 || "";
		z = z < 0 ? 0 : z;
		y.manualScore = z;
	}
	console.log("x", x, "y:", y);
}

在这里插入图片描述

 到此这篇关于vue 输入框输入任意内容返回数字的实现的文章就介绍到这了,更多相关vue 输入框输入返回数字内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue输入框输入任意内容返回数字的实现

本文链接: https://lsjlt.com/news/144482.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue输入框输入任意内容返回数字的实现
    本文主要介绍了vue 输入框输入任意内容返回数字,具体如下: 输入任意内容只返回数字 // 提取数字 传入数字 export function changeEvent(item) ...
    99+
    2024-04-02
  • js如何实现限制输入框只能输入数字
    这篇文章主要介绍了js如何实现限制输入框只能输入数字,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。例子:html代码<input ty...
    99+
    2024-04-02
  • jquery如何实现数字输入框
    小编给大家分享一下jquery如何实现数字输入框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!效果如下:代码如下:<!DO...
    99+
    2024-04-02
  • Vue怎么使用antd中input组件去验证输入框输入内容
    本篇内容介绍了“Vue怎么使用antd中input组件去验证输入框输入内容”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果图 &...
    99+
    2023-07-02
  • 如何实现input输入框内容实时监测
    小编给大家分享一下如何实现input输入框内容实时监测,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!输入框内容实时监测!只有输入...
    99+
    2024-04-02
  • uniapp自定义输入框,实现验证码输入框、密码输入框、兼容微信小程序
    前言 在移动端或者小程序项目中,验证码输入框、密码输入框也是很常见的,今天我们就来实现一个这样的效果。 图片展示 代码实现 我这里是用uniapp实现的可兼容微信小程序。 大家如果需要微信小程序也可以参考此案例,实现思路都是一样的。 {{...
    99+
    2023-08-18
    微信小程序 uni-app 小程序
  • vue自定义数字输入框组件
    最近自己在练习组件开发,做了一个简单的数字输入框加减的组件,效果图如下: 组件可以传入三个参数,value是初始化值,max是可输入的最大值,min是可输入最小值,当然参数可以按需...
    99+
    2024-04-02
  • Vue使用antd中input组件去验证输入框输入内容(rules 案例)
    目录AntD是什么?antd的特性和优势如下:antd应用方法效果图  示例代码AntD是什么? AntD is An enterprise-class UI d...
    99+
    2024-04-02
  • jquery如何实现输入框内容不能为空
    本文小编为大家详细介绍“jquery如何实现输入框内容不能为空”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery如何实现输入框内容不能为空”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起...
    99+
    2024-04-02
  • Qt实现带字数限制的文字输入框
    核心构思 核心的点在于,限制输入的字数;主要的方法为创建一个组合窗口 textChanged 这个信号,会在你输入字符之后发射,可以连接这个信号,在发射了信号之后,去获取...
    99+
    2024-04-02
  • html怎么对齐输入框的内容
    html 中对齐输入框内容的方法:使用 text-align 样式:左对齐:text-align: left;居中:text-align: center;右对齐:text-align:...
    99+
    2024-04-22
    css
  • vue如何把输入框的内容添加到页面
    这篇文章给大家分享的是有关vue如何把输入框的内容添加到页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。vue最最最简单的demo(记得引入)实例化一个vue,绑定#app的元...
    99+
    2024-04-02
  • vue输入框怎么实现输完后光标自动跳到下一个输入框中
    本篇内容主要讲解“vue输入框怎么实现输完后光标自动跳到下一个输入框中”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue输入框怎么实现输完后光标自动跳到下一个输入框中”吧!实现思路首先我们需要...
    99+
    2023-07-05
  • javascript实现输入框内容提示及隐藏功能
    有时输入框较小,希望输入内容后,出现一个有放大输入内容的提示框 实现思路 页面上先编写出提示框,然后将提示框的css属性:display设置成none,隐藏起来 获...
    99+
    2024-04-02
  • layui如何实现输入框中只允许输入整数
    小编给大家分享一下layui如何实现输入框中只允许输入整数,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如下所示:<inp...
    99+
    2024-04-02
  • vue输入框中输完后光标自动跳到下一个输入框中的实现方法
    目录前言实现思路完整源码实现效果总结前言 最近接到这么一个需求,做一个安全码的输入框,限制为6位数,但是每一个写入的值都是一个输入框,共计6个输入框,当前输入框写入值后,光标自动跳到...
    99+
    2023-03-07
    按下回车键跳到下个输入框 vue输入框跳到下个
  • vue实现input框禁止输入标签
    目录vue input框禁止输入标签vue input框的禁用和可输入vue input框禁止输入标签 <input type="search" placeholder="请输...
    99+
    2024-04-02
  • vue实现移动端多格输入框
    近来公司提出需求,完成如下图h5页面操作。 网上没什么轮子可以使用,就自己徒手撸了一个。不多废话,直接上代码。 <div class="verify-tel"> ...
    99+
    2024-04-02
  • android studio如何获取输入框的内容
    要获取Android Studio中输入框的内容,可以按照以下步骤进行操作:1. 在布局文件中定义一个EditText控件,例如:`...
    99+
    2023-09-21
    android
  • android studio怎么获取输入框的内容
    要获取Android Studio中输入框的内容,你可以使用EditText控件的getText()方法来获取输入的文本内容。以下是...
    99+
    2023-08-16
    android studio
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作