设置电话号码等文本框中文本的格式

发布于 2024-09-25 13:57:16 字数 343 浏览 4 评论 0原文

在任何地方都找不到这个，也许我正在寻找错误的动词。

我试图让一个文本框在您输入数字时要求某种格式。为简单起见，让我们使用电话号码示例。当我在框中输入内容时，我需要一些指导原则来帮助用户输入电话号码的正确格式：

(4__) ___-____

(403) 3__-____

(403) 329-98__

(403) 329-9824

这将防止用户忘记区号等。我在其他地方看到过这样做，但不确定从哪里开始。

我确信这是 javascript，但它适用于 ruby on Rails 应用程序，所以如果您知道插件或其他东西。

谢谢！

乔什

原文

Couldn't find this anywhere, maybe I'm looking for the wrong verbs.

I'm trying to get a textbox to require a certain format as you type in a number. For simplicity, lets use a phone number example. As I type into the box I want some guidelines to help the user enter the correct format of the phone number:

(4__) ___-____

(403) 3__-____

(403) 329-98__

(403) 329-9824

This will prevent users from forgetting the area code, etc. I've seen this done elsewhere but am unsure of where to start.

I'm sure this is javascript but it's for a ruby on rails app so if you know of a plugin or something.

Thanks!

Josh

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌无敌 2024-10-02 13:57:16

我认为您正在寻找屏蔽输入 jQuery 插件

回复收藏 0 原文

桃扇骨 2024-10-02 13:57:16

为什么不直接创建三个文本输入，并使用 javascript 在它们被填充时在它们之间移动焦点？

有关示例，请参阅此 jsfiddle。它使用快速的 vanilla-JS 函数在输入之间前进：

function advance_phone(event, next_element)
{
   var evt = event ? event : window.event; // Older versions of IE don't pass along an event object
   var target = evt.target || evt.srcElement; // Get the target of the event

   if (target.value.length == target.maxLength)
   {
     document.getElementById(next_element).focus();
   }
}

您可以进一步增强它，以允许在按下退格键时在框之间向后移动，并添加一个按键处理程序以将允许的键限制为数字。或者您甚至可以设置输入的样式，使其看起来像电话字段。

Why not just create three text inputs, and use javascript to move focus between them as they are filled?

For an example, see this jsfiddle. It uses a quick, vanilla-JS function to advance between the inputs:

function advance_phone(event, next_element)
{
   var evt = event ? event : window.event; // Older versions of IE don't pass along an event object
   var target = evt.target || evt.srcElement; // Get the target of the event

   if (target.value.length == target.maxLength)
   {
     document.getElementById(next_element).focus();
   }
}

You take this further and enhance it to allow moving backwards between boxes when backspace is pressed and add a keypress handler to restrict allowed keys to numbers. Or you could even style the inputs so that it looks like a phone field.

回复收藏 0 原文