如何在文本框内移动用户输入？
在前端开发中，可以通过JavaScript来实现在文本框内移动用户输入。以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>移动用户输入</title>
<style>
#inputBox {
width: 300px;
height: 100px;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="inputBox" contenteditable="true"></div>
<script>
var inputBox = document.getElementById('inputBox');
inputBox.focus(); // 将焦点设置在文本框内
inputBox.addEventListener('keydown', function(event) {
var keyCode = event.keyCode;
var currentSelection = window.getSelection();
var currentPosition = currentSelection.focusOffset;
if (keyCode === 37 && currentPosition === 0) {
event.preventDefault(); // 阻止默认行为，即阻止光标移动到文本框之外
}
if (keyCode === 39 && currentPosition === inputBox.innerText.length) {
event.preventDefault(); // 阻止默认行为，即阻止光标移动到文本框之外
}
});
</script>
</body>
</html>上述代码中，我们创建了一个可编辑的<div>元素作为文本框，并通过设置contenteditable="true"属性使其可编辑。然后，我们使用JavaScript监听文本框的keydown事件，当用户按下键盘时触发相应的操作。
在示例代码中，我们阻止了光标在文本框的开头按下左箭头键（keyCode为37）时移动到文本框之外，以及在文本框的末尾按下右箭头键（keyCode为39）时移动到文本框之外。这样就实现了在文本框内移动用户输入的效果。
请注意，以上示例代码仅为演示目的，实际应用中可能需要根据具体需求进行修改和优化。
相关·内容
2回答
如何在文本框内移动用户输入？
、、、、
我试图将用户输入进一步向右移动，因为边框会截取文本，使其看起来不整洁。我试图让它在文本之前有一个空格，但我不能让它工作。因此，如果有人知道如何解决这个问题，我将非常感激。
浏览 15提问于2020-11-17得票数 3
回答已采纳
如何在GWT中构建Facebook风格的输入框？当显示输入人员列表时，当选择一个人时，该列表将显示在文本框内。
浏览 1提问于2011-01-13得票数 4
回答已采纳
如何在angular中获取输入中的默认文本。off" type="text" disabled="true"
placeholder="Username" class="ng-untouched ng-pristine ng-valid"> 文本框内的默认值是PS :我们需要验证这些输入中存在的默认文本。
浏览 18提问于2019-10-10得票数 0
1回答
有没有办法在文本框中设置一个type=为“time”的占位符？现在它显示时间输入格式，如--:--，但我想显示“开始时间”和“结束时间”(在文本框内，而不是在外部标签上)
<asp:TextBox ID="StartingHour" Type="time" runat
浏览 29提问于2018-07-18得票数 0
回答已采纳
如何在此文本框内将输入类型设置为仅文本？type="text";
但是它们不能正常工作。
浏览 2提问于2017-09-24得票数 0
3回答
我已经制作了一个表单，但是我在其中添加了0px的边距，它也将该边距应用于输入中的文本(例如，对于用户名输入，您将把您的姓名放在哪里)，这意味着它位于框的左侧边缘。如何在保留框本身的边距的同时，向框内的文本添加边距？
提前谢谢。
浏览 0提问于2011-04-19得票数 7
回答已采纳
3回答
我有一个将用作搜索输入的文本框。我想让文本显示来指示该框将搜索哪个字段，但是当单击/in并用户设置了一个值时，默认文本就消失了。在您开始输入之前，您可能在填写标签在框内的表单时也看到过这种情况。如何在不搞砸ng-model的情况下做到这一点呢？
浏览 0提问于2016-06-09得票数 0
5回答
</asp:TextBox>
当用户在文本框内单击以输入要搜索的关键字时，我希望清除文本框内的文本。我该怎么做？
浏览 4提问于2011-09-22得票数 0
回答已采纳
我正在使用输入掩码库，并希望实现时间格式的掩蔽。showMaskOnHover:true加载文本框后问题是-只要我在文本框内单击，掩蔽就会隐藏，即文本框为空。开始键入数字后，掩码将再次出现。
你知道我们如何在文本框的焦点上使掩蔽可见
浏览 4提问于2022-04-05得票数 0
回答已采纳
2回答
如何在RDL-2005文本框定义中插入换行符？示例:如何在文本框内的换行符上显示FooNewline：
`<Textbox Name=""RdlDescriptorLegendTextbox"">
浏览 0提问于2010-12-15得票数 4
回答已采纳
在Firefox和Iexplorer中，我都无法输入任何输入字段。我不知道是什么导致了这一切，我也不会犯任何错误。
浏览 1提问于2014-11-19得票数 0
回答已采纳
当用户将焦点更改为同一数据输入表单上的另一个控件时，我收到了要求将文本框内容正常化的要求。示例规范化：
以这种方式规范文本框内容是否可以接受？
浏览 8提问于2009-10-28得票数 2
回答已采纳
我有一个使用Bootstrap 4制作的表单，我希望将其缩放以适合移动用户的视窗。
如您所见，表单输入不适合屏幕的宽度。我希望它们占据屏幕的宽度。
浏览 0提问于2019-02-20得票数 0
1回答
我正在尝试获得这样的效果:当我单击文本框时，插入符号移动到索引0示例"hello“(|hello)现在当我写东西时，我希望文本出现在"hello”之前示例"hello2hello“
我已经使用了如下函数不幸的是，这些操作并没有产生想要的效果，我得到的是我输入的镜像。示例(而不是hello，我得到olleh)如何在文本框内单击后更改插入符号的索引？
浏览 0提问于2012-03-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
