Keeping placeholder visible when typing - html

Question

I am using React and try to build a website which allows you to analyze your twitter bubble. So, I have a form in which you can search for a twitter username. Thus, I put an "#" as a placeholder into this form, which disappears when you start typing. My goal is that the "#" stays when you start typing, so e.g. I could type "potus44" and it displays "#potus44" in this form (i hope this makes sense). So in the end, the "#" would not disappear but stay in front of the twitter handle.
See screenshot of my current form: Screenshot
This is the code for my form.
import React, { Component } from 'react';
import { FiTwitter } from "react-icons/fi";
const app = {
options: []
};
const onFormSubmit = (e) => {
e.preventDefault();
const option = e.target.elements.option.value;
if (option) {
app.options.push(option);
e.target.elements.option.value = '';
}
}
class Homepage extends Component {
render () {
return (
<div className="homepage">
<div className="container-pagecontent">
<main style={{marginTop: '150px'}}>
<h1 id="home" >Analyse your bubble! <FiTwitter size=".8em" /></h1>
<p>Search for your bubble.</p>
<form onSubmit={onFormSubmit}>
<input placeholder="#" className ="input" type="text" name="option"/>
<button className="button">Suchen</button>
</form>
</main>
</div>
</div>
)
}
}
export default Homepage
And this is my scss (in case it might be useful for you).
.button {
background-color: #1763A5;
font-family: bergen;
color: white;
border: 2px solid #1763A5;
padding: 6px;
font-size: 18px;
border-radius: 6px;
margin-left: 10px;
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
outline: none;
}
.button:hover {
background-color: white;
color: #1763A5;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.input {
width: 150px;
}
input[type=text] {
width: 170px;
padding: 7px 10px;
margin: 12px 0;
margin-right: 2px;
box-sizing: border-box;
border: 2px solid #1763A5;
border-radius: 6px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
outline: none;
}
and the code for the "container-pagecontent":
.container-pagecontent {
max-width: 95rem;
margin: 0 auto;
padding: 0 $m-size;
width: 100%;
text-align: center;
}
Thanks in advance for your help. Let me know if you need more insights into the project.

Answer 1

okay.
In styles.scss::
.homepage {
h1::before {
display: block;
content: " ";
margin-top: -150px;
height: 130px;
visibility: hidden;
pointer-events: none;
}
height: 110vh;
background-color: white;
padding-left: 40px;
padding-right: 40px;
}
#font-face {
src: url(/fonts/BergenText-Regular.otf);
font-family: bergen;
}
.button {
background-color: #1763A5;
font-family: bergen;
color: white;
border: 2px solid #1763A5;
padding: 6px;
font-size: 18px;
border-radius: 6px;
margin-left: 10px;
transition-duration: 0.4s;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
outline: none;
}
.button:hover {
background-color: white;
color: #1763A5;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.placeholder{
position: relative;
}
.placeholder::after{
content: attr(data-placeholder);
position: absolute;
left:0.325rem;
top:33%;
}
input[type=text] {
width: 170px;
padding: 7px 0 7px 20px;
margin: 12px 0;
margin-right: 2px;
box-sizing: border-box;
border: 2px solid #1763A5;
border-radius: 6px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
outline: none;
}
In App.js::
import React, { Component } from "react";
import "./styles.scss";
const app = {
options: []
};
const onFormSubmit = (e) => {
e.preventDefault();
const option = e.target.elements.option.value;
if (option) {
app.options.push(option);
e.target.elements.option.value = "";
}
};
class Homepage extends Component {
render() {
return (
<div className="homepage">
<div className="container-pagecontent">
<main style={{ marginTop: "150px" }}>
<h1 id="home">Analyse your bubble!</h1>
<p>Search for your bubble.</p>
<form onSubmit={onFormSubmit}>
<div className="placeholder" data-placeholder="#">
<input
className="input"
type="text"
name="option"
/>
</div>
<button className="button">Suchen</button>
</form>
</main>
</div>
</div>
);
}
}
export default Homepage;