Displaying text inside an HTML input

Question

Is it possible to display dynamic texts contents inside an HTML input element, some thing similar to how chrome browsers CTRL + F works.

Like it shows the number of hits in the page.

Can anyone please help, if possible how or share some useful materials to achieve the same?

Is it possible to display dynamic texts inside an HTML input element, You mean highlight the matching content in an input value? — gurvinder372
– gurvinder372, Commented Feb 25, 2016 at 5:24
@gurvinder372 ... no I have edited the question, please see. — Roy
– Roy, Commented Feb 25, 2016 at 5:31
If I got your question right, do you mean HTML text highlight? like in this question: stackoverflow.com/questions/119441/highlight-a-word-with-jquery — lastboy
– lastboy, Commented Feb 25, 2016 at 6:30

Chris Spittles · Accepted Answer · 2016-02-25 08:02:24Z

You can easily achieve this using a combination of relative and absolute positioning on the parent and child elements like this:

.field {
  position: relative;
  display: inline-block;
}
.field__input {
  padding-right: 40px;
}
.field__helper {
  position: absolute;
  right: 5px;
  top: 4px;
  color: #999;
  font-size: 12px;
}
/* this is just fluff to make it look nicer */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

<div class="field">
  <input type="text" value="find" class="field__input">
  <span class="field__helper">1 of 5</span>
</div>

We use a relatively positioned parent (.fieldRow) to wrap around the input field. Then, we use a span (.helper) containing the text we want to display and using position: absolute; we can position it to the right of the input field. Last of all, we need a little padding on the right hand side of the input to stop the inputted value from bleeding into our helper text.

Collectives™ on Stack Overflow

Displaying text inside an HTML input

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related