如何在文本中间实时显示输入值
在前端开发中，可以通过JavaScript来实现在文本中间实时显示输入值的功能。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时显示输入值</title>
</head>
<body>
<input type="text" id="inputText" oninput="showInputValue()">
<p id="display"></p>
<script>
function showInputValue() {
var inputText = document.getElementById("inputText").value;
var display = document.getElementById("display");
var textLength = inputText.length;
if (textLength % 2 === 0) {
// 文本长度为偶数时，在中间插入一个空格
var firstHalf = inputText.slice(0, textLength / 2);
var secondHalf = inputText.slice(textLength / 2);
display.innerHTML = firstHalf + " " + secondHalf;
} else {
// 文本长度为奇数时，直接显示
display.innerHTML = inputText;
}
}
</script>
</body>
</html>这段代码中，通过oninput事件绑定了showInputValue函数。每当输入框的值发生变化时，该函数就会被调用。函数首先通过getElementById方法获取输入框和显示区域的元素，然后通过value属性获取输入框的值。
接下来，通过判断文本长度的奇偶性，来确定如何在中间显示输入值。如果文本长度为偶数，就将其分为两半，并在中间插入一个空格。如果文本长度为奇数，直接显示输入值。
最后，将处理后的值赋给显示区域的innerHTML属性，从而实现在文本中间实时显示输入值的效果。
这个功能在表单输入、搜索框等场景中比较常见，可以提升用户的交互体验。腾讯云相关产品和产品介绍链接地址可根据实际情况自行补充。
相关·内容
1回答
我想要显示输入值，以取代文字中间的一个词，实时使用这样:您好先生做什么名字是您的国家 我尝试使用keyup并用输入值替换名称，但这只做了一次，并且不更新cos，名称不再存在，用来替换输入值。
浏览 2提问于2019-06-09得票数 0
回答已采纳
2回答
我想问一下，如何在网站上实现Python和图形，如这个在PD控制器上的？如何为代码输入区域提供代码表示，如向用户显示的那样？您如<em
浏览 3提问于2020-06-23得票数 1
回答已采纳
2回答
我试图为NSTextField对象实现一个委托，以便实时检测用户输入，并对该特定字段中不允许的输入提供一些反馈。特别是，我希望模拟来自onChange()的JavaScript方法，实时检测用户的输入，并在写入不受支持的值时向他显示警告。也就是说，应用程序有一个文本字段，它只接受0到255之间的数值(比如RGB值)，我想知道用户何时写的不是数字值或超出范围的值，以便立即向他显示警告
浏览 1提问于2014-02-20得票数 1
回答已采纳
目的：我无法实时获得输入对话框中的值，并通过键盘输入以外的函数对其进行修改。
也没有找到获得实时输入值</em
浏览 4提问于2022-07-24得票数 0
2回答
我试图让用户在表单中输入信息(通过单选按钮)，操作输入数据，并将结果文本写到网页的中间--在单选按钮表单的下方。问题是如何在页面中间写入字符串值。我在函数的末尾有这个伪代码(假设我想写入页面的字符串名为aVariable)：当然，在显示的页面中有这样的HTML：
<div id="aPlace"&
浏览 4提问于2011-03-23得票数 0
回答已采纳
1回答
按日期过滤
、、
我在A节中输入工作开始日期(如20-10-2016)，然后在B节中输入预期的结束日期(如0-10-2016)，在C节中我希望自动显示文本，这取决于A节中的日期是否还没有到(“未开始”)，如果A节中的日期已经过去，并且我们处于A节和B节中的日期跨度的中间(例如，对于上面的示例，25-10-2016)，让C节说(“进行中”)，如果B节中的日期已经过去，让C部分说(“工作完成”)。我如何在Google Sheets中实现这一点？
浏览 1提问于2016-10-31得票数 1
2回答
在codesandbox链接中，我有一个具有多个输入的表单，我希望将输入值存储到每个输入的本地存储中，每次刷新页面时，每个输入的值仍然存在，当然，在发生更改时，本地存储也会自动更新每个输入的值，感谢帮助我度过美好的一天，谢谢：我可以将它们的值存储在本地存储中，但是当页面刷新和更新时，我不知道如何在输入中保留值。
浏览 2提问于2020-09-13得票数 2
回答已采纳
4回答
我到处搜索，似乎找不到实时更新标签的明确答案。
如何在不使用按钮的情况下更新UILabel (实时)？例如，我有一个文本字段和一个连接到UIlabel的view controller。一旦用户开始输入textfield，同样的文本就会实时显示在UI标签上。因此，这个消除了--使用按钮更新标签。我该怎么做呢？
浏览 8提问于2017-04-13得票数 0
回答已采纳
问题是它没有得到第一个输入的值，而是从第二个输入值开始。
如果我输入"123“，它只显示"12”。
浏览 2提问于2014-11-02得票数 1
回答已采纳
我有一个编辑文本，其中除“*”符号外，所有字符都处于相同的方向。我希望所有字符都处于相同的方向。我尝试了字体编辑文本，但它不工作。并在谷歌和这里搜索，但没有找到任何与我的问题相关的链接。
浏览 0提问于2012-03-15得票数 0
回答已采纳
1回答
当我有一个表单和一些约束规则(如max value或LessThanOrEqual )时，如何显示此规则条件，以便用户知道输入所接受的数据格式？更多信息此值应小于或等于{ compared_value }}
编
浏览 2提问于2020-06-04得票数 0
回答已采纳
我需要用jquery实时显示输入值。如何用输入名称或其他方式更改div文本？function(){ $('#' + namer).text($(this).val());我希望XX命名的输入值将显示在
浏览 1提问于2019-08-14得票数 1
回答已采纳
我正试图在Mac上用Octave编写一个MadLibs类型的游戏，但我不知道如何在文本字符串中间显示用户选择的单词。我使用fprintf来显示变量在中间的句子，只要变量等于一个数字，它就可以很好地工作。如果输入的不是数字，则会出现错误。\n', Word) 如何允许用户选择一个单词，然后将该单词显示在文本字符串的中间？ 提前谢谢。
浏览 39提问于2019-04-17得票数 0
回答已采纳
我想在输入上做JavaScript实时计算，而不需要提交按钮。var result = a * b;
document.getElementById("result").value;
由于有两个输入</e
浏览 2提问于2016-10-09得票数 0
2回答
我有一个Android应用程序，我想要实现一个功能，用户可以上传SVG，然后将SVG保存在一个实时数据库中，然后其他用户可以看到它并与它交互，我之所以选择SVG而不是常规的照片或PNG，是因为它非常小，不需要存储或加载数据，而且它们具有更好的多重显示密度和不同的屏幕比率，问题是如果我不知道它将以什么格式保存，问题是我不知道它的格式是否可行。如何在Firebase实时数据库中保存SVG/向量？
是否有更好
浏览 8提问于2021-09-05得票数 0
回答已采纳
我注意到我不能在NSSecureTextField中输入俄文或阿拉伯文。
浏览 5提问于2013-10-30得票数 2
回答已采纳
1回答
我试图在文本框中实现实时搜索，这是来自服务器的选项列表，如果项目不可用，它应该动态添加，比如我输入"gre“并选择它，它应该添加到列表中，或者应该显示在列表的顶部。编码：
如代码中所指定的，元素'entranceExamSearch‘输入框包含项目列表
浏览 2提问于2017-06-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
