html - ハイフン区切りでフィールドに英数字を強制的に入れる

Question

次の画像を見てください

http://i50.tinypic.com/2cohfeo.jpg

画像に 4 つの特性のコードを挿入して、新しい HTML コードを作成する方法を教えてください。

Answer 1

javascript と jquery を使用し (通常の javascript を使用している場合は、getElementById を使用する必要があると思います)、テキストボックスの名前が「text」であると仮定します。

http://api.jquery.com/keydown/

$('input[name=text]').keydown(function(event)
{
    var text = this.val().replace("-",""); //get current text, take out the -
    var strlength = text.length;

    if (strlength >=10) //reached max length, ignore character        
    {
        return false; // might be event.preventDefault();
    }
    else if (strlength<5) //you want a letter
    {
        //if not a letter, cancel input
        if (!(/^[a-zA-Z]+$/.test(String.fromCharCode(event.which))) return false;
    }
    else if (strlength>=5) //you want a letter
    {
        //if not a number, cancel input
        if (!(/^[0-9]+$/.test(String.fromCharCode(event.which))) return false;
        else if (strlength==5) this.val(text + "-"); //Add the hyphen
    }
});

バックスペースを処理するコードが必要な場合がありますが、自明/説明的である必要があります