I have an input field that I cannot use a placeholder for, instead I must use a label and place it as it was a placeholder, so right in the field. How can I hide the label when you start typing into the field, and make the label reappear hen all letters are removed from the field - so just like the placeholder ould behave?
My html:
<label class="PR_label" for="PR">My label</label>
<input type="hidden" name="PR" value="" id="TR">
EDIT: I realised this is not possible since my input field is hidden and you cannot enter/type anything since there is no fied to begin with.
If you want use your label as placeholder in your input field you can use CSS position.
* {
box-sizing: border-box;
}
.form-control {
width:50%;
padding: 0.625rem;
position: relative;
}
label {
position: absolute;
top: 1.7rem;
right: 1.625rem;
color: blue;
}
input[type="text"] {
display: block;
width: 100%;
padding: 1rem;
}<div class="form-control">
<label class="PR_label" for="PR">test</label>
<input type="text" name="PR" value="a" id="TR">
</div>HTML:
<div class='wrapper'>
<label class="PR_label" for="PR">My label</label>
<input type="hidden" name="PR" value="" id="TR">
</div>
If you plan to make it visible again:
const labelElement = document.querySelector('.PR_label')
const inputElement = document.querySelector('input')
inputElement.addEventListener('keydown', () => {
labelElement.style.display = 'none'
})
If you plan to not make it visible again:
const labelElement = document.querySelector('.PR_label')
const inputElement = document.querySelector('input')
inputElement.addEventListener('keydown', () => {
labelElement.remove()
})
css:
.wrapper {
display: grid;
grid-template: 1fr / 1fr;
}
input,
.PR_label {
grid-row: 1;
grid-column: 1;
}
You can place the label inside the textbox using position: absolute; and then hide the label when the user types, using an event listener:
var textbox = document.getElementById("input_box")
var label = document.getElementById("label")
textbox.addEventListener("keydown", function() {
label.style.display = "none"
}, false);#input_box {
position: absolute;
top: 0;
left: 0px;
}
#label {
position: absolute;
top: 0;
left: 0px;
}<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input value="" id="input_box">
<label id="label">Lorem ipsum</label>
<script src="code.js"></script>
</body>
</html>