5

I've seen on some occasions people having issues with their placeholders not disappearing when they start typing inside the input. That's actually what I want.

On my register form I've got a captcha verification in the shape of " 24 - 3 + 6 = ? "

What I wanted to do is having this calcul not outside the input, but actually inside, and the user's answer would be typed after the calcul ( by setting a padding-left in the input to make the text starts after the calcul ).

Is it possible to get my placeholder to stick even when the user starts typing ?

Others suggestions are welcomed aswell if you have a clean alternative for what I am trying to do.

As always, thanks a lot for your help !

apatik
  • 383
  • 4
  • 17
  • or style 2 divs to look like one input and place the equation in the first one. – Banana Nov 30 '15 at 17:44
  • Possible duplicate of [HTML - Keep placeholder when user types](http://stackoverflow.com/questions/26324252/html-keep-placeholder-when-user-types) – NovaLogic Nov 30 '15 at 17:45
  • 1
    I'd suggest placing the equation within a `label` and then positioning it so that it overlays its `input`. – Shaggy Nov 30 '15 at 17:48
  • 1
    something like [This](https://jsfiddle.net/at4szc3y/1/) – Banana Nov 30 '15 at 17:50
  • thanks for the answers, I'll check NovaLogic's thread right away, and @Shaggy Yes the equation was originally in a label, but to have it overlays the input I had to set its position to absolute but the result wasn't very clean, that's why I came up with the placeholder idea – apatik Nov 30 '15 at 17:55
  • If you share the solution you had using a `label` and the problems it was causing, someone may be able to help you clean it up a bit. – Shaggy Nov 30 '15 at 17:57
  • @Shaggy I think my problem mostly came from dynamic elements of my page slightly moving others relative blocks. I think Banana's idea of making a "wrap" might actually solves it, if not I'll update with my code, anyways thanks a lot – apatik Nov 30 '15 at 18:08
  • 1
    Or something like [this](https://jsfiddle.net/3k6q1u6L/2/). – JCOC611 Nov 30 '15 at 18:09
  • @JCOC611 That's interesting, the prefix wouldn't be included in the value of the input when the form is submitted, right ? – apatik Nov 30 '15 at 18:13
  • Actually, it does get included unless you hack around it with `.affixValue()`. Might not be the option you're looking for if you just want to use a regular form submission. – JCOC611 Nov 30 '15 at 18:15
  • aw, yes. the equation's answer is processed by a function for the captcha-verification :/ – apatik Nov 30 '15 at 18:20

1 Answers1

3

Put the equation and input in a container, then style the container to look like an input and the input to look normal.

.captcha {
  display: inline-block;
  padding: 0.2em;
  background-color: white;
  border: 1px solid #A9A9A9;
}

.placeholder {
  color: #A9A9A9;
}

.answer {
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
}
<div class="captcha">
  <label class="placeholder" for="answer-1">24 - 3 + 6 = </label>
  <input id="answer-1" class="answer" type="number" name="answer-1">
</div>
<div class="captcha">
  <label class="placeholder" for="answer-2">(24 - 3 + 6) * (1579 - 41 + 2) = </label>
  <input id="answer-2" class="answer" type="number" name="answer-2">
</div>
Jacob
  • 2,212
  • 1
  • 12
  • 18
  • 1
    I will go with this solution since it is working very fine and it doesn't possible to directly modify the visibility of the input's placeholder. Thanks ! – apatik Dec 01 '15 at 16:24