javascript - Create paragraph with placeholders - Stack Overflow

admin管理员组

文章数量:1391947

I need to create paragraph of text with missing words as on the picture provided:

I want user to fill missing words, and thus I'd like to make spans (that are placeholders for missing words) contentEditable=true

Is it possible to achieve with css?

I need to create paragraph of text with missing words as on the picture provided:

I want user to fill missing words, and thus I'd like to make spans (that are placeholders for missing words) contentEditable=true

Is it possible to achieve with css?

• javascript
• html
• css

Share Improve this question Follow asked Jul 27, 2015 at 10:13 Alex SmolovAlex Smolov 1,86144 gold badges2525 silver badges4343 bronze badges 2

• the width of your span should be fixed? – Fabrizio Calderan Commented Jul 27, 2015 at 10:16
• Do you want the user to be able to type the missing words directly into the blanks? – Gideon Commented Jul 27, 2015 at 10:20

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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

You could add a border-bottom to your span (and 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;
}

You could even add some style to highlight empty span and warn the user, e.g.

[contenteditable]:empty {
   background: yellow;
}

---

Result

Yes it is possible

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

Like described on the fairly popular tutorial Natural Language Form with Custom Input Elements, it's also possible to achieve this with a few inputs and Javascript, which will be switched into span and div.

This way is actually very useful if you want to send the data as it's build as a form at the beginning.

Good Luck'

Yes of course you can simply give those spans the style you need:

Use a border-bottom to specify that this span should be edited, to give the placeholder effects:

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.

EDIT:

And to make it look like a normal text after editing you can apply this javascript function on it:

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

本文标签： javascriptCreate paragraph with placeholdersStack Overflow