0

I have this input :

  <input type="number" class="textfield numberField font"  name="Price" placeholder="Price"><br>

So the text place holder is price. When user start typing I would like to keep the word price.

So if he types 65 he will see on the input :

Price 65

Do I need to create another div inside for the word price, or can it be done using js or html ?

Curnelious
  • 1
  • 16
  • 76
  • 150

3 Answers3

2

I think you want to be like that.

  
.full-input {
  display: inline-block;
  padding: 3px;
  border: 2px solid blue;
}
input {
  outline: none;
  border: none;
  display: inline-block;
  line-height: 1.2em;
  font-size: 14pt;
}
label {
  display: inline-block;
  font-size: 12px;
  color: blue;
}
<div class='full-input'><label for='price'>Price</label>
  <input type='number'class="textfield numberField font"  name="Price">
 </div>
Su Yatanar
  • 173
  • 3
  • 13
  • You need to make the `input` have an `id` of "price" and not just a `name` for the `label` to work. –  Feb 21 '19 at 06:56
1

One way would be to check if the value is equal to an empty string, and if so, manually set the value to Price. Note that this will require removing the type="number" restriction.

document.getElementsByTagName('input')[0].onkeydown = function() {
  if (this.value == '') {
    this.value = "Price ";
  }
}
<input class="textfield numberField font" name="Price" placeholder="Price">

If you only want to allow numbers, then you could add a pattern validation of something like pattern="Price [0-9]":

document.getElementsByTagName('input')[0].onkeydown = function() {
  if (this.value == '') {
    this.value = "Price ";
  }
}
<form>
  <input class="textfield numberField font" name="Price" placeholder="Price" pattern="Price [0-9]">
  <input type="submit">
</form>

Keep in mind that both approaches would have the word Price in the value (which may be unintended). Creating a <label> may be more appropriate for your situation.

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • This would still have the word inside the value, which placeholder doesn't do. –  Feb 20 '19 at 01:46
  • 1
    Yeah, that is definitely a downside. But you can't have the word "Price" 'inside' the `` without having it as the `value`... unless you were to strip the word on form submission, or simply use a ` – Obsidian Age Feb 20 '19 at 01:48
  • @ObsidianAge It works for the most part, except you can delete the Price. Try writing code to disallow that. https://stackoverflow.com/questions/37218331/unchangeable-leading-characters-in-html-input this link could help your write that – Aniket G Feb 20 '19 at 02:02
  • 1
    Thanks so it looks like the best thing to do is another label to the left of the input? like: priceLabel | input – Curnelious Feb 20 '19 at 02:05
1

You may try this:

.textfield.labeled>.label {
    flex: 0 0 auto;
    margin: 0;
    font-size: 14px;
}

.textfield.labeled .label:first-child+input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: transparent;
}

.textfield.labeled>input {
    padding-left: 3px;
    border: 1px solid rgba(34,36,38,.15);
    box-shadow: none;
}

.textfield.labeled {
    display: inline-flex;
    color: rgba(0,0,0,.87);
}

.label {
    display: inline-block;
    background-color: #e8e8e8;
    padding: 2px 5px;
    color: rgba(0,0,0,.6);
    font-weight: bold;
}
<div class="textfield labeled">
  <div class="label">
    Price
  </div>
  <input type="number" class="textfield numberField font"  name="Price" placeholder="Price">
</div>
yimei
  • 383
  • 1
  • 3
  • 12
  • Nice styling, but you get benefits from using the semantic tag `label`--namely, when you connect the `for` attribute with the `input`'s `id` attribute (same string), a label click will put users into the field itself. –  Feb 21 '19 at 06:58