3

Google のサインアップ フォームを再現したい: https://accounts.google.com/SignUp?continue=http%3A%2F%2Fwww.google.ca%2F&hl=en しかし、方法がわからないフィールド内のテキストを選択不可にします。ここに問題があります。テキストフィールドを編集可能にする必要があるため、読み取り専用を使用できません。説明が必要な場合は、リンクを参照してください。また、フィールドのマージン内にテキストを入れる方法がわかりません

これが私がこれまでに持っているものです: HTML:

<input type="text" onkeyup="validateName(this)" id="first" name="firstName" class="nameSignup" value="First">

CSS: #first { color: グレー; }

Javascript:

function validateName(id){
var str = id.value;

if(str == ""){
    id.value = "First";
    $(id).prop('selectionStart', 0)
                 .prop('selectionEnd', 0);
            //psudo code
             turn text grey
             turn text unselectable
             margin-left: 10px;
}else{
        //Pseudo code
        erase the default value
        turn text black
        turn text editable
        margin-left: 0px;
        check if the character is valid (not @, #, $, etc)
}
}
4

1 に答える 1

2

HTML5 プレースホルダー属性を使用できます。ただし、これは古いブラウザではサポートされていません。

<input type="text" onkeyup="validateName(this)" id="first" name="firstName" class="nameSignup"  placeholder="First">

CrossBrowser の互換性については、おそらくこれを確認できます

于 2013-04-26T01:38:02.393 に答える