Question

我有一个带有文本框的网页。目前，通过某些JavaScript，该文本框仅允许您键入数字或减号或破折号-。

我的问题是，我希望有一种方法可以进一步强制输入形式为3个数字，然后是“-”，然后再加上2个数字，仅此而已。因此，每次输入时看起来就像###-##。到目前为止，我已经尝试了很多类似此代码的方法。

<input type="text" name="Item1" id = "Item1" value="" type="number" pattern="(0){3}-(0){2}" onkeypress="return isNumberKey(event)"/></input>

但是该模式无效。任何有关我应该从哪里开始研究或示例代码的建议都将是不错的。我希望它可以在CSS中实现，但javascript可以。

Answer 1

以下模式应该可以解决问题。

[0-9]{3}-?[0-9]{2}

如

<input type="text" name="Item1" id = "Item1" value="" type="number" pattern="[0-9]{3}-?[0-9]{2}" onkeypress="return isNumberKey(event)"/></input>

Answer 2

输入的形式为3个数字，后跟一个'-'，然后再输入2个数字

let inputHandler = function(e) {
  var tmp = this.value.replace(/[^0-9]/g, '').split('');
  if (3 < tmp.length) {
    tmp.splice(3, 0, '-');
  }
  this.value = tmp.join('').substr(0, 6);
};

document.addEventListener('DOMContentLoaded', function(e) {
  document.querySelectorAll('[name=Item1]').forEach(function(inp) {
    inp.addEventListener('input', inputHandler);
  });
});

input {
  margin: 2px;
}

<input type="text" name="Item1" /><input type="text" name="Item1" /><input type="text" name="Item1" />

Answer 3

您正在寻找的模式是：

using GooglePlayGames;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Experimental.UIElements;
using UnityEngine.UI;

public class LeaderboardController : MonoBehaviour {

public static LeaderboardController instance;

private const string ID = ".......";

public UnityEngine.UI.Button LeaderboardsButton;

// Use this for initialization
void Awake () {
    MakeSingleton();
    GetTheButton();
}

void GetTheButton()
{
    //this line is the problem about object reference.
    LeaderboardsButton = GameObject.Find("Leaderboards").GetComponent<UnityEngine.UI.Button>();
    LeaderboardsButton.onClick.RemoveAllListeners();
    LeaderboardsButton.onClick.AddListener(() => OpenLeaderBoardsScore());
}
// Update is called once per frame
void Start(){
    PlayGamesPlatform.Activate();
}
void OnLevelWasLoaded()
{
    PostScore();
}
void MakeSingleton()
{
    if(instance != null)
    {
        Destroy(gameObject);
    }
    else
    {
        instance = this;
        DontDestroyOnLoad(gameObject);
    }
}
public void OpenLeaderBoardsScore()
{
    if (Social.localUser.authenticated)
    {
        PlayGamesPlatform.Instance.ShowLeaderboardUI(ID);
    }
    else
    {
        Social.localUser.Authenticate((bool success) =>
        {

        });
    }
}
void PostScore()
{
    //this is the line that Leaderboard error sends me. 
    if (Social.localUser.authenticated)
    {
        Social.ReportScore(PlayerPrefs.GetInt("Score"), ID, (bool success) =>{

        });
    }
}

对此进行扩展，

[0-9]{3}-[0-9]{2}

[0-9]        : accepts any value from 0 to 9
<pattern>{x} : specifies how many times <pattern> should be matched
[0-9]{3}     : match value from 0 to 9 three times

Answer 4

如果您想为 html 中的文本输入制作一些常规模式。你可以使用我在下面写的模式。

电子邮件

<input type="email" id="email" name="email"pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

网址

<input type="url" id="website" name="website"pattern="https?://.+" >

密码
虽然至少有8个——一个大写+数字

<input type="password" id="pwd" name="pwd" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">

如果你想制作自己的设计，你应该学习这些 RegExp w3school 上的正则表达式。

强制将特定模式输入文本框

4 个答案: