Menu
Community /Pin to ProfileBookmark
@NogDogJul 08.2019 — #Warning: I am not a JavaScript expert. However, this seems to work:
@daveyerwinJul 08.2019 — #@daveyerwinJul 09.2019 — #
Changing value into a placeholder
I have a search bar with a value of “USA” and I want that value to change into a placeholder that says
“Anywhere in the world” when click inside the input form.
How can I do that ?
Sign in
to post a comment5 Comments(s) ↴
0
@NogDogJul 08.2019 — #Warning: I am not a JavaScript expert. However, this seems to work:<i>
</i><!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form action="">
<label for="test">Test:</label>
<input type="text" name="test" placeholder="Anywhere in the world" value="USA"
onfocus="this.value = '';" onblur="if(this.value == ''){this.value='USA';}">
</form>
</body>
</html>
0
@daveyerwinJul 08.2019 — #``<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
form{display:inline-block;}
fieldset{
border: 0.1em solid black;
position: relative;
margin-top:1.4em;
background-color: #ddd
}
legend {
margin:0.2 em;
position: absolute;
top: -1.20em;
background-color: #ddd;
border:0.1em solid;border-top-left-radius:.4em;
border-top-right-radius:.4em;border-bottom:none ;
}
</style>
<form>
<fieldset>
<legend> Seach Bar </legend>
<label> pick some place:
<input value=USA placeholder="Anywhere in the world">
</label>
</fieldset>
</form>
<script>
document.forms[0].onclick=function(){this.elements[1].value=''}
</script>
</body>
</html><i>
</i>``0
@daveyerwinJul 09.2019 — #``<i>
</i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<div class="form-container">
<form action="#" class="form">
<input value="Try &quot;Los Angeles, Buckingham Rd&quot;" aria-label="search" placeholder="dsfvqdsf" type="text">
<button><i class="fas fa-search"></i></button>
</form>
</div>
<script>
document.forms[0].elements[0].onclick=function(){this.value=''}
</script>
</html><i>
</i>``