JSFiddle

Question

我试图使用HTML，CSS和JS创建一个简单的打字测试应用程序。我想在用户输入的框中显示一些占位符文本，以便他们确切地知道在键入内容时输入的内容。如果它们搞砸了，它将变得明显，因为占位符文本和输入文本不会排成一行。我花了不少时间试图解决这个问题，并提出了两个低于标准的解决方案： HTML：

    <div id='test' class="placeholder" data-value="This appears in the box!">
    <textarea id="typed" name="typed" cols=50 rows=15></div>

CSS：

    .placeholder
    {
        position: relative;
    }

    .placeholder::after
    {
        position: absolute;
        left: 2px;
        top: 2px;
        content: attr(data-value);
        pointer-events: none;
        opacity: 0.6;
        text-align: left;
    }

这非常有效，但遗憾的是，任何换行符都会被完全忽略，显示为空格或字面显示。我已经尝试了\ u000A，\ x0A，\ r \ n，只需按Enter键，它就无法工作。

选项二使用占位符属性：

    <textarea placeholder="line1
    line2" id="typed" name="typed" cols=50 rows=15></textarea>

这显示正确，但一旦开始输入，它就会消失。

是否有人知道如何使标准占位符文本永久保留，或者有其他正确格式的解决方法？

Answer 1

我会远离使用数据属性或占位符文本来完成此任务。我认为如果你走这条路线，你会发现很难包含换行符和跨浏览器的兼容性。使用2个绝对定位的textareas堆叠在彼此之上怎么样？较低的textarea将包含用户需要键入的文本，并且将被禁用，而顶部的文本将具有透明背景，因此您可以看到下面的文本。这是一个快速模型，看起来如何：

HTML：

<div id='test' class="placeholder">
    <textarea id="typed" name="typed" cols=50 rows=15></textarea>
    <textarea id="type" name="typed" cols=50 rows=15 disabled>
This is the text you have to type.
You can put as many lines as you want.
    </textarea>
</div>

CSS：

textarea {
    position:absolute;
    font-size:20px;
}
#type {
    color:red;
}
#typed {
    background:none;
    z-index:10;
}

JSFiddle

Answer 2

这是an example。

你几乎就在那里，我所做的就是把它们装在一个容器里。

div和text textarea都是绝对定位的并且共享相同的字体。占位符的位置考虑了1px边框和textarea上的2px填充。这些是默认值，如果您更改它们，则需要更改占位符位置。

.container {
    position: relative;
}
textarea
{
    position: absolute;
    top: 0px;
    left: 0px;
}

.placeholder
{
    position: absolute;
    left: 3px;
    top: 3px;
    content: attr(data-value);
    pointer-events: none;
    opacity: 0.6;
    text-align: left;
    z-index: 1;
}

textarea,
.placeholder {
    font-family: arial;
    font-size: 16px;
}

您将在下面注意到占位符div中有一个<br />用于换行符。 HTML处理换行符的方式与文本不同，因此您的比较代码必须考虑到这一点：

<div class='container'>
    <div id='test' class="placeholder">This text appears<br /> in the box</div>
    <textarea id="typed" name="typed" cols=50 rows=15></textarea>
</div>

如何使占位符文本永久化并正确格式化？

2 个答案:

JSFiddle