使用占位符创建段落

Question

我需要创建一段缺少文字的文字，如下图所示：

我希望用户填写缺失的字词，因此我想制作spans（这是缺少字词的占位符）contentEditable=true

是否可以用css实现？

Answer 1

HTML：

This is text <input type="text" class="a" /> and here is a space.

CSS：

.a{
    border:none;
    border-bottom: 1px solid black;
    width:50px;
}

Answer 2

您可以为您的范围添加border-bottom（以及display: inline-block）：http://codepen.io/anon/pen/VLERdp

span[contenteditable] {
  border-bottom: 1px #333 solid;
  min-width: 100px;
  min-height: 1.3em // firefox bug
  display: inline-block;
}

你甚至可以添加一些样式来突出显示空span并警告用户，例如

[contenteditable]:empty {
   background: yellow;
}

结果

Answer 3

是的，有可能

id-of-span{ 
   width:40px;
   height: 1px;
   border-bottom: 1px solid #000000;

Answer 4

就像在相当受欢迎的教程Natural Language Form with Custom Input Elements中所描述的那样，通过一些输入和Javascript也可以实现这一点，它将被切换为span和div。

如果您希望在开始时将数据构建为表单，这种方式实际上非常有用。

祝你好运＆＃39;

Answer 5

是的，你当然可以简单地为这些跨度提供你需要的风格：

使用border-bottom指定应编辑此范围，以获得占位符效果：

span.missingWords {
  border-bottom: 1px solid;
  min-width: 50px;
  width: auto;
  display: inline-block;
}

Any <span class='missingWords' contenteditable="true"> </span> with the contenteditable attribute set will have a grey outline <span class='missingWords'></span>as you hover over. Feel free to edit <span class='missingWords' contenteditable="true"> </span> and
change their contents. I'm using <span class='missingWords' contenteditable="true"> </span>local storage to maintain your changes.

修改

要使其在编辑后看起来像普通文本，您可以在其上应用此javascript函数：

$('.missingWords').bind('keyup', function() {
    $(this).css('border-bottom', 'none');
});