0

I want to make do a typing accuracy check application. What I want to achieve is to make the words (user should type) in the placeholder or similar to the effects of placeholder while users are typing.

When user types the words in the input, the word in placeholder should disappear or fit the words in the input (user can't see it).

I have checked several other examples on stackoverflow, for example, but nothing helps me.

This the effect I want to acheiveenter image description here

Could anyone give me some ideas and solutions of how to solving this?

I have been struggled with this for a long time.

Thanks for any responds!

*Sorry, my english sucks. I want to something like this in this website

Yusuf
  • 79
  • 6
  • 1
    Take a moment to inspect the source of the website you're trying to copy. You will notice they are not using `` tags at all. They are using plain `
    ` tags for each word, inside a container with `display:flex; flex-wrap: wrap`. Their cursor is mocked, it's not the native cursor and their entire UX is based on `keyUp` event listeners.
     – tao Dec 11 '21 at 20:48

1 Answers1

1

Take a look at this. https://jsfiddle.net/dgstcu0y

Summary of what I tried here is below :

  1. I add event listener that will take input and insert into our div which is like custom input.

    const input = document.getElementById("input") const content = document.getElementById("content")

    input.addEventListener("input",(event)=>{
    const value = event.target.value
  content.innerHTML = value
})

  2. Then, I make the input transparent. But the problem is it also make the cursor transparent. So, I tried to add | after our custom-input div.

  3. Using CSS I tried to to overlap our custom div with generic input.

    .wrapper { position: relative; width: 300px; } #input { color: transparent; padding: 0; background: transparent; } .custom-input { position: absolute; top: 0; color: grey; z-index: -1; } #content:after { content:"|" }

Here is HTML skeleton.

<html>
<body>
<div class="wrapper">
  <input id="input">
  <div class="custom-input">
    <span id="content"></span>
    <span>My Suggestions</span>
  </div>
</div>
</body>
</html>

Customize it according to your need.

Alok Prakash
  • 191
  • 1
  • 9
  • Thanks for the answer, Alok, but for the link you give me, it is changing the `my suggestions` (like the placeholder)? – Yusuf Dec 11 '21 at 20:24
  • 1
    You can change its style. You can see that "My Suggestion" is not changing. You can change/insert your suggested text using javascript. I also visited to the linked website. They are using event listener to accomplish those styling. In short they are not using input to display what user is typing. – Alok Prakash Dec 11 '21 at 20:29