如何使文本域内的文本不可选择(直到输入第一个字符)，并有一个5px的左边距

CSS How Do I Make the Text Inside Of a Textfield Unselectable (until first character entered) and Have A Left Margin Of 5px

本文关键字：文本 字符 有一个 左边 5px 第一个 何使 可选择 输入      更新时间：2023-09-26

我想复制谷歌的注册方式: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:#第{颜色:灰色;}

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

可以使用HTML5占位符属性。这在旧的浏览器中是不支持的。

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

支持对于跨浏览器兼容性，你可以检查this

相关文章：