How can I make (" * ") using font face and use input box by react js?

Question

@font-face {
    font-family: "fontello";
    src: url("./font/fontello.eot?0000");
    src: url("./font/fontello.eot?0000#iefix") format("embedded-opentype"),
      url("./font/fontello.woff2?0000") format("woff2"),
      url("./font/fontello.woff?0000") format("woff"),
      url("./font/fontello.ttf?0000") format("truetype"),
      url("./font/fontello.svg?0000#fontello") format("svg");
    font-weight: normal;
    font-style: normal;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<!-- begin snippet: js hide: false console: true babel: false -->

<input type="text" onChange={this.inputChange} value={this.state.inputValue}/>

So By using css font face in the input box how can we display asterisk characters.where I can show in UI and I can capture the original characters in onchange method and update to state and I have tried in this way but no use.

Note: value{*.repeat(this.state.inputValue)} I don't require this method

if you don't want to show the thing, why you are using CSS to hide it because anyone can see it in dev tools — Nisharg Shah, Jan 04 '21 at 08:24
I want to see * in the input box but in my value attribute I want the data like for example value =Input text entered by user but in UI I want it as ***** displayed like how password works @NishargShah — Akhil Raghav, Jan 04 '21 at 08:31
@NishargShah I have checked there is no property which can show * in input box,if you have can you please share any example? — Akhil Raghav, Jan 04 '21 at 08:58
please provide the sample demo, so I can edit it and give the required result you want, create in codesanbox, its supports react — Nisharg Shah, Jan 04 '21 at 09:04
@NishargShah please look it into this [https://codesandbox.io/s/hungry-dust-6z8kn?fontsize=14&hidenavigation=1&theme=dark] read comments in my code — Akhil Raghav, Jan 04 '21 at 09:35

Nisharg Shah · Answer 1 · 2021-01-04T11:16:31.357

0

You can simply edit the unicode and download the webfonts in fontello and add that fonts folder in your code and you will good to go

Article: https://medium.com/@wowmotty/replace-the-input-password-bullet-1cd4ee34e0aa

Codesandbox: https://codesandbox.io/s/dank-tree-fwwty?file=/src/App.js

Thanks for the suggestion OP

edited Jan 04 '21 at 11:16

answered Jan 04 '21 at 09:47

Nisharg Shah

16,638
10
62
73

Can you print the inputValue and check, where I want input value what user had entered – Akhil Raghav Jan 04 '21 at 09:53
I tried a lot of things, now I think there is only two way, use CSS or track every key and append that to the last value – Nisharg Shah Jan 04 '21 at 10:33
look https://stackoverflow.com/questions/12578507/implement-an-input-with-a-mask – Nisharg Shah Jan 04 '21 at 10:40
Can you please read my question clealy As I was trying with css by using font-face I am failing in doing it. – Akhil Raghav Jan 04 '21 at 10:44
tag me when you get your solution, I appreciate your question – Nisharg Shah Jan 04 '21 at 10:51
Can you please look this https://github.com/Mottie/input-password-bullet and I am unable to implement in react could please help me – Akhil Raghav Jan 04 '21 at 10:54
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/226818/discussion-between-akhil-raghav-and-nisharg-shah). – Akhil Raghav Jan 04 '21 at 11:51

How can I make (" * ") using font face and use input box by react js?

1 Answers1