Question

如何制作内容为灰色的文本框，当我点击它以输入文本时，灰显部分会消失并允许我输入所需的文字？

示例：

“名字”文本框。单词“First Name”在文本框内部显示为灰色，当我点击时，这些单词消失，我在其中写下我的名字。

Answer 1

Chrome，Firefox，IE10和Safari支持html5占位符属性

<input type="text" placeholder="First Name:" />

为了获得更多的跨浏览器解决方案，你需要使用一些javascript，那里有很多预先制作的解决方案，不过我不知道任何问题。

http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 2

这个答案说明了HTML5之前的方法。请使用placeholder属性查看Psytronic's answer以获取现代解决方案。

HTML：

<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />

JavaScript的：

function inputFocus(i) {
    if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
    if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}

Answer 3

使用HTML5，您可以使用以下内容执行此操作：<input name="first_name" placeholder="First Name">

虽然（IE）

所有浏览器都不支持此功能

这可能有效：

<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null">

否则，如果您使用的是jQuery，则可以使用.focus和.css来更改颜色。

Answer 4

如果您只定位HTML5，则可以使用：

<input type="text" id="firstname" placeholder="First Name:" />

对于非HTML5浏览器，我将使用jQuery构建Floern的答案，并使javascript非突兀。我还会用一个类来定义模糊属性。

$(document).ready(function () {

    //Set the initial blur (unless its highlighted by default)
    inputBlur($('#Comments'));

    $('#Comments').blur(function () {
        inputBlur(this);
    });
    $('#Comments').focus(function () {
        inputFocus(this);
    });

})

功能：

function inputFocus(i) {
    if (i.value == i.defaultValue) {
        i.value = "";
        $(i).removeClass("blurredDefaultText");
    }
}
function inputBlur(i) {
    if (i.value == "" || i.value == i.defaultValue) {
        i.value = i.defaultValue;
        $(i).addClass("blurredDefaultText");
    }
}

CSS：

.blurredDefaultText {
    color:#888 !important;
}

Answer 5

最简单的方法是直接将以下代码添加为您要更改的输入类型中的附加属性。

onfocus="if(this.value=='Search')this.value=''" 
onblur="if(this.value=='')this.value='Search'"

请注意：将“搜索”文本更改为“go”或任何其他文字以符合您的要求。

Answer 6

这有效：

<input type="text" id="firstname" placeholder="First Name" />

注意：您可以将占位符，ID和类型值更改为＆＃34; email＆＃34;或任何适合您需要的东西。

W3Schools的更多详情：http://www.w3schools.com/tags/att_input_placeholder.asp

但到目前为止，最好的解决方案是Floern和Vivek Mhatre（由j0k编辑）

我在下方有一个代码段，这是一个典型的网页。

＆＃13;

.Submit {
    background-color: #008CBA;
    border: 3px;
    color: white;
    padding: 8px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
div {
  background-color: yellow;
  }

＆＃13;

<div>
  <center>
  <p>Some functions may not work, such as the css ect.
  <p>First Name:<input type="text" id="firstname" placeholder="John" />
  <p>Surname:<input type="text" id="surname" placeholder="Doe" />
  <p>Email:<input type="email" id="email" placeholder="john.doe@example.com" />
  <p>Password:<input type="email" id="email" placeholder="john.doe@example.com" />
  <br /><button class="submit">Submit</button>                 </center>
</div>

＆＃13;

Answer 7

这是一个精心制作的版本，以帮助您理解

function setVolatileBehavior(elem, onColor, offColor, promptText){
elem.addEventListener("change", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("blur", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("focus", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.value=promptText;
elem.style.color=offColor;
}

像这样使用：

setVolatileBehaviour(document.getElementById('yourElementID'),'black','gray','Name');

Answer 8

您可以使用Floern的解决方案。您可能还想在将颜色设置为灰色时禁用输入。 http://www.w3schools.com/tags/att_input_disabled.asp

Answer 9

这是一种使用ES6语法在jQuery输入上分层文本的单线苗条方法。

$('.input-group > input').focus(e => $(e.currentTarget).parent().find('.placeholder').hide()).blur(e => { if (!$(e.currentTarget).val()) $(e.currentTarget).parent().find('.placeholder').show(); });

* {
  font-family: sans-serif;
}

.input-group {
  position: relative;
}

.input-group > input {
  width: 150px;
  padding: 10px 0px 10px 25px;
}

.input-group > .placeholder {
  position: absolute;
  top: 50%;
  left: 25px;
  transform: translateY(-50%);
  color: #929292;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group">
  <span class="placeholder">Username</span>
  <input>
</div>

HTML / CSS制作带有灰色文本的文本框，当我点击输入信息时消失，怎么做？

9 个答案: