CODEWITHSUNDEEP
javascripthtml
Curnelious
Curnelious

Reputation: 1

Keep input's place holder text while typing

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 ?

Upvotes: 0

Views: 338

Answers (3)

yimei
yimei

Reputation: 433

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>

Upvotes: 1

Su Yatanar
Su Yatanar

Reputation: 181

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>

Upvotes: 2

Obsidian Age
Obsidian Age

Reputation: 42304

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.

Upvotes: 1

Related Questions