input输入框自动消除空格

最新推荐文章于 2022-04-29 14:29:40 发布
最新推荐文章于 2022-04-29 14:29:40 发布
阅读量2.5k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38822390/article/details/90606690
版权

今天遇到了一个问题,用户在在前端的input里面输入id的时候，多写了个空格,数据库里面就找不到id了，所以无法获取输入的id所绑定的标签位置在哪里，现在需要在前端做一个处理，input框输入的数值里面，会自动消除空格。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="modal-body form">			
				<div class="form-group">
					<label class="col-sm-2 control-label" >资产编号<span class="required"> * </span></label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="assetId" onkeyup="this.value=this.value.replace(/[, ]/g,'')"></input>						
					</div>
				</div>		
		</div>
	</body>
</html>

这段代码的作用：

onkeyup="this.value=this.value.replace(/[, ]/g,'')"

1：在input框里面输入编号的过程中，出现空格，自动消除
2：input首尾出现空格，自动消除
3：复制粘贴的文本里面出现空格，自动消除

原文作者：祈澈姑娘 关注「编程微刊」公众号 ，在微信后台回复「小程序」，获取小程序开发全套资料和500G编程资源教程。

编程微刊
关注
微信小程序-如何实现input等输入框禁止输入空格【亲测有效】
**My Coding Family**
04-09 7999
微信小程序怎么让输入框禁止输入空格呢？那你还不进来，白给哦。
html页面去除input组件的空格
渴望飞的鱼的博客
05-27 2651
html页面去除input组件的空格 $("#card").bind("blur",function(){ var result=$(this).val().replace(/(^\s*)|(\s*$)/g, ""); $("this).val(result); }); str为要去除空格的字符串: 去除所有空格: str = ...
input输入框自动去除空格
热门推荐
qq_45838276的博客
01-30 1万+
<el-input v-model.trim = "data"><el-input> 注意：在绑定数据后面加.trim就会 自动去掉空格，可以优化登录时账号密码的输入，以及与发送数据给后端时去除多余空格。
js去除空格
jkl_zhouliang的专栏
11-02 874
<br />str为要去除空格的字符串:<br />去除所有空格:   <br />str   =   str.replace(//s+/g,"");       <br />去除两头空格:   <br />str   =   str.replace(/^/s+|/s+$/g,"");<br />去除左空格：<br />str=str.replace( /^/s*/, '');<br />去除右空格：<br />str=str.replace(/(/s*$)/g, "");
angular自动去除input框前后空格（angular2-trim-directive）
medusa222的博客
10-27 1434
angular去除input框前后空格（angular2-trim-directive）要解决的问题使用angular2-trim-directive1. 安装ng2-trim-directive2. 在使用input框的module中导入InputTrimModule2. 在input框或textarea中使用 angular2-trim-directive使用demo 要解决的问题 用户在输入框输入数据时，不小心多按了空格，然后提交了数据； 或者搜索是，多按了空格，会导致想搜索的条目搜索不到； 这就需要
input去空格
weixin_34092370的博客
10-18 195
2019独角兽企业重金招聘Python工程师标准>>> ...
vue element-ui实现input输入框金额数字添加千分位
10-15
在Vue组件的`template`部分，`<el-input>`绑定了v-model指令和trim修饰符，确保双向数据绑定并且自动去除输入值两端的空格。同时，使用`@blur`事件触发`inputMoney`方法，用于在用户完成输入后处理数据。 9. Vue...
vue表单验证之禁止input输入框输入空格
01-18
测试小姐姐让输入框不允许输入空格，安排。  刚开始用的下面这个方法，因为我是电脑端f12的情况下调试移动端，所以下面这个方法可以实现禁止输入空格，于是就打包测试上线了，上线后才发现真机中不支持，应该是pc端...
vue判断input输入内容全是空格的方法
08-27
这里，我们将深入探讨如何在Vue中判断一个input元素的输入值是否全由空格组成。 首先，我们需要理解Vue中的数据绑定机制。Vue采用的是双工绑定（Two-way binding），这意味着我们可以直接在Vue实例的`data`对象中...
vue中输入框禁止输入空格
weixin_53592107的博客
12-16 7951
一，使用修饰符.trim trim修饰符：他是v-model的一种修饰符。可以过滤掉内容左右两边的的空格代码如下： <el-input type="test" v-model.trim="userNameInput></el-input> 二，使用正则表达式 可以通过input事件来验证输入的内容是否有空格 1，输入框 /*keyup.native是回车事件*/ <el-input type="test" @keyup.native="getDataListS" v-mod
input去除所有空格
weixin_41760500的博客
05-14 1617
element input 去除所有空格 //οninput="value=value.replace(/\s+/g,'')" 去除所有空格 <el-input placeholder="请输入内容" oninput="value=value.replace(/\s+/g,'')" v-model="code"></el-input>
input输入框消除空格
qq_41353397的博客
05-02 1759
<input type="text" onkeyup="value=value.replace(' ','')"/> 使用：οnkeyup="value=value.replace(’ ‘,’’)"
input 去除前后空格
kxukai的博客
01-09 444
οnkeyup=“this.value=this.value.replace(/^\s+|\s+$/g,’’)”
Input输入框过滤空格方法
lyclyc_的博客
04-29 1万+
前端中判断input输入框是否输入是否有空格，实现过滤输入前和输入后的空格， v-model.trim用于去掉输入框内首尾空格 如下绑定的时候加上 .trim 那么如果直接在开头输入空格，或者是在末尾输入空格，是不会显示有输入内容的， <el-input type="text" v-model.trim="test00" ></el-input> 如果判断Input输入框是否为空，不为空时再提交，可以用 If(this.inputData.trim().length !==0){
解决input框中的空格问题
MyName469的博客
11-29 5107
解决input框中的空格问题为何要解决input框输入空格的问题解决input中的空格常用的方式通过.trim()来解决，会在获取到字符串之后把两头空格删除通过匹配正则表达式来实现空格的消除通过正则校验的方式有很多种，一般来说主要是监听键盘事件和input框的改变以上几种方式虽然可以杜绝用户在input框中输入空格，但是无法显示用户通过鼠标点击粘贴，粘贴到input中的空格 为何要解决input框...
input文本框--去首尾空格
icecoola_的博客
05-25 1万+
html代码 &amp;amp;amp;amp;lt;input type=&amp;amp;amp;quot;text&amp;amp;amp;quot; id=&amp;amp;amp;quot;test&amp;amp;amp;quot; name=&amp;amp;amp;quot;test&amp;amp;amp;quot; class=&amp;amp;amp;quot;input-xs &amp;amp;amp
Html使input框消除空格
明知山
09-05 1755
<input type="text" id="name" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"> 加上正则表达式之后你按下空格会自动缩回去
JQ 动态创建input，value有空格取值不全问题
宅即万物
06-21 1312
使用jq创建含有变量的input元素时，要注意引号的使用； 正确的用法是： var address_input = "<input type='hidden' name='address' value='"+address_value+"' />"; 双引号和单引号不能用反，整体使用双引号 在有变量的位置特别要注意单引号内的书写格式为"+变量名+" ...
el-input自动去掉前置空格
最新发布
07-28
对于 el-input 组件，你可以使用 input 事件和 trim 方法来实现自动去掉前置空格的功能。具体实现步骤如下： 1. 监听 input 事件，在事件处理函数中获取输入框的值。 2. 使用 JavaScript 的 trim 方法去除字符串前后的空格。 3. 将处理后的值设置回输入框。 以下是一个示例代码： ```html <template> <el-input v-model="inputValue" @input="handleInput"></el-input> </template> <script> export default { data() { return { inputValue: '' }; }, methods: { handleInput() { this.inputValue = this.inputValue.trim(); } } }; </script> ``` 在上述示例中，每当用户输入内容时，handleInput 方法会将输入框的值去除前后空格后重新赋值给 inputValue，从而实现自动去掉前置空格的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值