为输入框中的数字添加空格分隔符，并保存光标
位置，可以通过以下步骤实现：
- 首先，使用前端开发技术，例如HTML、CSS和JavaScript，创建一个输入框元素，可以使用
<input>标签来实现。 - 在JavaScript中，使用事件监听器来监听输入框的输入事件，例如
input事件。 - 在事件处理函数中，获取输入框的值，并使用正则表达式对数字进行匹配，例如使用
/\d+/g来匹配所有数字。 - 将匹配到的数字转换为字符串，并使用
replace方法添加空格分隔符，例如使用replace(/\B(?=(\d{3})+(?!\d))/g, ' ')来在每三个数字之间添加一个空格。 - 将添加了空格分隔符的字符串重新赋值给输入框的值。
- 使用光标位置保存的技术，例如使用
selectionStart和selectionEnd属性来获取光标的位置。 - 在重新赋值给输入框的值后，将光标位置重新设置为之前保存的位置，以保持光标位置不变。
以下是一个示例的代码实现：
<!DOCTYPE html>
<html>
<head>
<title>添加空格分隔符</title>
</head>
<body>
<input type="text" id="input" oninput="addSeparator()" />
<script>
function addSeparator() {
var input = document.getElementById('input');
var value = input.value;
// 匹配数字并添加空格分隔符
var formattedValue = value.replace(/\d+/g, function(match) {
return match.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
});
// 保存光标位置
var selectionStart = input.selectionStart;
var selectionEnd = input.selectionEnd;
// 更新输入框的值
input.value = formattedValue;
// 恢复光标位置
input.setSelectionRange(selectionStart, selectionEnd);
}
</script>
</body>
</html>这样，当用户在输入框中输入数字时，会自动添加空格分隔符，并且光标位置会保持不变。这个功能可以应用于各种需要对输入的数字进行格式化的场景，例如银行卡号、手机号码等。对于腾讯云相关产品和产品介绍链接地址，可以根据具体需求选择适合的云计算产品，例如云服务器、云数据库、云存储等，具体可参考腾讯云官方文档。
相关·内容
2回答
粘贴时如何根据正则表达式验证字段输入？
javascript、event-handling、dom-events、sanitization、cursor-position
我想用regex验证输入字段(替换所有元音)。输入应始终与该正则表达式相匹配，如果输入或粘贴到该字段，则应考虑输入。
我知道如何处理打字部分，但我需要复制粘贴的帮助。所有元音都应该跳过(e.g.: "abcde" copy --> "bcd" paste)
$('document').ready(function(){
var pattern = /[aeiou]/ig;
$("#input").on("keypress keydown", function (e) {
浏览 11提问于2022-03-09得票数 0
回答已采纳
1回答
输入事件上的regex表达式和Jquery的问题
javascript、jquery、input
使用正则表达式仅允许某些字符时出现问题。问题是当我试图在单词中插入一个字符来纠正错误时。当我尝试插入新字符时，光标移动到输入框的末尾。
这是我使用的代码：
$('body').on('input','.info',function() {
this.value = this.value.replace(/[^a-zA-Z0-9+&,*_\- \b \r ]/g, '');
有什么提示吗？
提前谢谢你
浏览 8提问于2020-05-15得票数 0
回答已采纳
1回答
当在“替换”( JavaScript )中触发正则表达式时，光标向后移动
javascript、regex、keyup
我已经附加了小提琴的链接来模拟我得到的问题。
我输入了12345 >光标在中间的12\345>类型“空格”>123\\45
在我输入“空格”后，光标将向后移动。
问题：我怎样才能让它停留在和以前一样的地方？
document.querySelector("#removeSpace").onkeyup = function()
{
var start = this.selectionStart,
end = this.selectionEnd;
this.value = this.value.replace(/\s/g,&
浏览 2提问于2018-03-08得票数 1
回答已采纳
1回答
jQuery:将虚拟键盘中的字母添加到输入框中的插入符号位置
javascript、jquery、html
我正在学习jquery，并为输入文本框创建一个虚拟键盘(用于输入特殊字符)。我设法将单击事件上的字母添加到用户单击的插入符号位置的输入中。
$('#keyboard #e_specchar').click(function(){
var $this = $(this);
var caret = document.getElementById('input').selectionStart;
var character = $this.html();
var textAreaStr = $('#input').val()
浏览 1提问于2015-05-04得票数 1
回答已采纳
2回答
在单击事件的文本框中选择和取消选择值
javascript、jquery、html、selection
嗨，朋友们，我的表单中有多个文本框，我没有在点击中做任何代码来取消选择，问题是，有些铬是如何满足我的需要的(当我再次单击同一个选定的文本框时，光标被放置在我再次单击的位置)，但是当移动到其他浏览器时，它不会发生(在IE和FireFox中，它们能够选择并且不能取消选择)。任何经历过这件事的人，都建议我用一些代码来取消选举。
请帮我一下，
这是我的代码和
HTML
<input Value="sdfsdfsdf">
<input Value="8545555">
<input Value="Billa">
JQ
$
浏览 3提问于2014-09-08得票数 0
1回答
将光标移动到最后一个输入
jquery、html、cursor
我有一个textarea，用户可以在其中输入文本。用户还可以按一个按钮来添加图片和链接之类的内容。这个按钮即提示它们输入它们的链接，然后在光标位于的textarea 中输入正确的html。一个有效的代码示例是：
jQuery('input#btn').click(function(e) {
var link = prompt("Please paste the link", "http://");
jQuery('textarea#id1').insertAtCaret('<a href="&
浏览 3提问于2017-08-12得票数 0
1回答
Chrome扩展:如何将backspace键事件发送到文本字段？
javascript、google-chrome-extension
我试图通过我的contentScript文件发送一个命令，以删除用户插入的<input>字段中字符串的最后一个字符。
已经尝试了几种在网上找到的方法，但都没有用。
我最后一次尝试使用TextEvent (如下面的代码)，但没有成功。
contentScript.js -
document.getElementById("inputTextId").value = "Some string inserted by user";
var textEvent = document.createEvent(&
浏览 0提问于2018-07-22得票数 1
回答已采纳
1回答
ngModelChange角/类型记录中光标指向末尾的问题
javascript、angular、typescript、ngmodel、selection-api
我的HTML输入字段和使用ngModelChange的类型记录组件有问题。我希望能够在任何需要的地方编辑输入值。
例如：
原始输入自动填充为"00:00:00“。我想编辑它到"01:20:00".with我的键盘我定位光标(^)，我需要它到0^0:00:00I输入1，结果是“01:00:00^”如果我想要添加2，我需要再次移动光标，这对我来说是不可取的。
我知道这是一个已知的问题，可以通过使用setSelectionRange重新设置游标来解决，但是这个问题没有起作用，因为即使我使用了具有光标正确值的setSelectionRange(selectionStart，se
浏览 3提问于2021-02-01得票数 3
回答已采纳
1回答
停止光标的重新定位
javascript、angularjs、angularjs-directive
我有一个有角的数字格式。
我需要将光标定位在执行插入或删除数字的位置。
目前，在插入或删除光标后，光标将被追加到最后(我不需要这种行为，我希望光标停留在那里)
// This runs when we update the text field
ngModelCtrl.$parsers.push(function(viewValue) {
return viewValue.replace(/,/g, '');
})
我的工作代码是，请随时从分叉
浏览 4提问于2015-12-11得票数 0
回答已采纳
6回答
设置文本区域中的文本-光标位置
javascript、textarea
我正在编写一个BBCode编辑器，下面是代码：
var txtarea = document.getElementById("editor_area");
function boldText() {
var start = txtarea.selectionStart;
var end = txtarea.selectionEnd;
var sel = txtarea.value.substring(start, end);
var finText = txtarea.value.substring(0, start) + '[b]&#
浏览 7提问于2016-01-23得票数 44
回答已采纳
1回答
在突出显示文本时，将光标移动到输入的末尾
javascript、jquery、html、highlight
我需要把光标放在输入的最后，因为它在开始，它会突出显示文本，所以它会开始。
我试着使用this.selectionStart = this.selectionEnd = this.value.length;，但它不能很好地工作，或者我把它放在了错误的位置。
谢谢:)
window.setInterval(function() {
change();
}, 1);
function change() {
$(function() {
var elem = $('#code');
highlighter(' new ', elem,
浏览 0提问于2018-09-05得票数 0
13回答
反应控制输入光标跳跃
reactjs、input、text-cursor
我正在使用React，并格式化了一个受控输入字段，当我编写一些数字并单击输入字段外时，这个输入字段工作得很好。但是，当我想编辑输入时，光标会跳到输入字段中值的前面。这只发生在IE中，而不是在例如Chrome中。我已经看到，对于一些程序员来说，光标会跳到值的后面。因此，我认为我的光标跳到前面的原因是因为值是对齐的，而不是输入字段中的左边。这里有一位议员：
我的第一个输入是1000，然后我想把它编辑成10003，但是结果是31000。
是否有办法控制光标不应该跳转？
浏览 2提问于2017-09-01得票数 28
1回答
返回给输入的regex数组值的末尾。
javascript、jquery、arrays、regex
我有一个输入，这个输入限制为10。如果用户要删除或后退数字数组中间的一个数字，光标或后退行现在位于数组的末尾，而不是用户首先选择要放置的后备空间的位置。我希望这样，当用户选择这个数字数组，并希望删除中间的两个数字时，他们可以这样做，而不需要退格光标跳到数字数组的末尾。
HTML
<div>
<input type="text" id="test" name="test" style="width: 210px;" maxlength="10" />
</div>
JS
var y
浏览 2提问于2017-03-06得票数 1
回答已采纳
5回答
在React中设置格式时停止光标跳转
reactjs
我在react组件上有一个输入字段，它显示项目的线价格(小数点两位，有数千个分隔符)。我希望在组件第一次呈现时以货币格式显示值，并在字段中以用户类型保持货币格式。
目前，我的组件中有以下代码：
var React = require('react');
import accounting from 'accounting';
MoneyInput = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
onChange: Re
浏览 5提问于2016-02-21得票数 26
回答已采纳
2回答
使用jquery过滤输入文本字段会导致光标在IE和Chrome中跳转
jquery、input、cursor-position
我正在过滤输入文本字段中的输入，例如：
我还在动态地过滤输入，比如删除非数字字符。
$("#txtlevel").bind('keyup', function(evt)
{
var value = $(this).val();
value = value.replace(/\D/g, ''); /* Remove any non-digit characters */
if ( value.length > 1 )
{
value = value.replace(/^[ 0]/g,&#
浏览 2提问于2011-08-15得票数 2
回答已采纳
1回答
获取输入元素的焦点上的carat位置
javascript、jquery、html
当用户在已填充的输入框内单击时，我想要获取当前光标位置。但是使用this.selectionStart;只能给出'0‘，使用下面的代码：
$('.exampleDiv').on('focus', 'input', function() {
console.log(this.selectionStart);
});
Html
<div class="exampleDiv" style="width=300px;"><input value="This is a pre
浏览 1提问于2017-07-31得票数 2
1回答
如何使用虚拟键盘编写光标所在的字符？
javascript、html、cursor-position、virtual-keyboard
我正在做一个HTML实时编辑器。它基本上是针对移动用户的。所以我制作了一个有HTML标签的虚拟键盘。然而，我面临一个问题:键盘只在另一个标签的末尾打印标签。所以它不是我想要的那样起作用的。
这是密码。
(function() {
'use strict';
var i, c, t, delay = 5000,
kb = document.getElementById('keyboard');
/* get all the input elements within the div whose id is "keyboard */
浏览 4提问于2020-01-21得票数 1
回答已采纳
1回答
React:在光标处插入值
javascript、reactjs、react-native、react-redux
我需要添加一个值(从下拉列表中)，它将被添加到输入字段‘在光标的位置’：
import { useState } from "react";
import "./styles.css";
export default function App() {
const [cur, setCur] = useState("");
const [state, setState] = useState("");
const [dropVal, setDropVal] = useState("");
cons
浏览 0提问于2021-03-24得票数 1
1回答
一个输入中的多个regexp
javascript、regex、regexp-replace
嗨，我有一个用于移动号码的输入类型tel和类似于这个938 119 1229的数字格式的使用模式，但是当我使用tel类型时，我可以在输入中使用word，我尝试在一个输入中使用两个正则表达式，但是我不知道如何：
function mobileNumInput(input){
var regex = /[^0-9]/g; //for digit only
input.value=input.value.replace(/^(\d{3})(\d{3})(\d+)/, '$1 $2 $3'); //for space between numbers
inp
浏览 0提问于2019-10-16得票数 0
回答已采纳
2回答
更新文本区域值，但保持光标位置不变
javascript、html
我有一个html文本区域，将通过javascript定期更新。
当我这样做的时候：
$("#textarea").val(new_val);
光标移动到文本的末尾。
我想在不改变光标位置的情况下更新文本。此外，如果用户选择了一定范围的文本，则应保留突出显示。
浏览 1提问于2010-07-20得票数 17
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
