代码之家 › 专栏 › 技术社区 › Antarctica-UFO

我想防止输入中出现数字和特殊字符,强制将字符放在第一个位置

letter character forms javascript

Antarctica-UFO · 技术社区 · 9 月前

我已经成功地做了其他事情:

使用javascript阻止第一个字符为空格
使用javascript阻止连续空格
使用html强制输入中的每个单词大写现在我想强制第一个字符为字母,以防止仅在第一个字符中出现数字和特殊字符。我知道这是可以做到的,但我找不到这个有用的代码。我已经做了这么多,这是我的状态最不需要的!:D

这就是我做上述所有事情的方式:

function SpaceBlock() {
    var space = document.getElementById("real_name");
        if(space.selectionStart === 0 && window.event.code === "Space"){
            window.event.preventDefault(); } }

function SpaceBlock2() {
    var space = document.getElementById("display_name");
        if(space.selectionStart === 0 && window.event.code === "Space"){
            window.event.preventDefault();} }
            
var lastkey;
var ignoreChars = ' \r\n'+String.fromCharCode(0);
function ignoreSpaces(e) {
    e = e || window.event;
    var char = String.fromCharCode(e.charCode);
    if(ignoreChars.indexOf(char) >= 0 && ignoreChars.indexOf(lastkey) >= 0) {
        lastkey = char;
        return false; }
    else {
        lastkey = char;
        return true; } }

var lastkey2;
var ignoreChars2 = ' \r\n'+String.fromCharCode(0);
function ignoreSpaces2(e) {
    e = e || window.event;
    var char2 = String.fromCharCode(e.charCode);
    if(ignoreChars2.indexOf(char2) >= 0 && ignoreChars2.indexOf(lastkey2) >= 0) {
        lastkey2 = char2;
        return false; }
    else {
        lastkey2 = char2;
        return true; } }

<input type="text" name="real_name" placeholder="Real Name" id="real_name" required minlength="6" maxlength="24" tabindex="1" onkeydown="SpaceBlock()" onkeypress="return ignoreSpaces(event);" style="text-transform: capitalize;" >

<input type="text" name="display_name" placeholder="Display Name" id="display_name" required minlength="6" maxlength="24" tabindex="1" onkeydown="SpaceBlock()" onkeypress="return ignoreSpaces(event);" style="text-transform: capitalize;" >

这是我表格中最不需要的东西,只是希望有人能帮忙。谢谢!

1 回复 | 直到 9 月前

Jenil Bhalala 9 月前

这里有一个增强的、更有条理的解决方案,可以处理以下情况:

防止第一个字符成为空格。
防止连续空格。
强制输入中的每个单词大写。
确保第一个字符是字母,而不是数字或特殊字符。

document.addEventListener("DOMContentLoaded", function () {
    // Function to handle all keypress events
    function handleKeyPress(event) {
        const input = event.target;
        const char = String.fromCharCode(event.which);

        // Prevent first character from being a space
        if (input.selectionStart === 0 && event.code === "Space") {
            event.preventDefault();
            return;
        }

        // Prevent first character from being a non-letter
        if (input.selectionStart === 0 && !/^[a-zA-Z]$/.test(char)) {
            event.preventDefault();
            return;
        }

        // Prevent consecutive spaces
        const lastChar = input.value.charAt(input.selectionStart - 1);
        if (char === " " && lastChar === " ") {
            event.preventDefault();
            return;
        }
    }

    // Attach event listeners to input fields
    const inputs = document.querySelectorAll("input[name='real_name'], input[name='display_name']");
    inputs.forEach(input => {
        input.addEventListener("keypress", handleKeyPress);

        // Set text-transform to capitalize to force capitalization of each word
        input.style.textTransform = "capitalize";
    });
});

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input
      type="text"
      name="real_name"
      placeholder="Real Name"
      id="real_name"
      required
      minlength="6"
      maxlength="24"
      tabindex="1"
    />

    <input
      type="text"
      name="display_name"
      placeholder="Display Name"
      id="display_name"
      required
      minlength="6"
      maxlength="24"
      tabindex="2"
    />
    <script src="./temp.js"></script>
  </body>
</html>