javascript - CSS如何使文本字段内的文本不可选择（直到输入第一个字符）并且左边距为5px

Question

我想以谷歌的方式复制注册表单： 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 { 颜色：灰色；}

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)
}
}

Answer 1

您可以使用 HTML5 占位符属性。但是，旧浏览器不支持此功能。

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

支持 跨浏览器兼容性可能你可以检查一下