I am working on Form (Frontend challenge) and stuck with input text field animation.
I have tried to use a placeholder instead of the label but It did not work. I am not sure am I on the right track or not. Sharing the code below. I have to complete it just with Vanilla JS.
When I focus on the input field label goes up as I wanted and the focus out comes back.
But if I fill the input with text, label, and text coming together in the input field. If Input has a text label needs to stay at the top. Thank you in advance.
// console.log("Hey, It's working");
const form = () => {
const inputText = document.querySelector("input[type=text]");
const nameText = document.getElementById("yourname");
inputText.addEventListener("focusin", (e) => {
nameText.classList.add("active");
});
inputText.addEventListener("focusout", (e) => {
nameText.classList.remove("active");
});
};
form();
fieldset {
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#sign-up-form {
padding: 25px;
margin: 50px 0;
}
input[type="text"] {
width: 100%;
border: 1px solid #ccc;
margin: 0 0 5px;
padding: 10px;
border-radius: 4px;
}
label {
font-size: 0.9em;
opacity: 0.5;
-webkit-transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
}
#sign-up-form {
text-align: center;
}
input {
margin: auto;
}
fieldset {
position: relative;
}
label {
position: absolute;
top: 0;
margin-left: -200px;
margin-top: 10px;
padding: 0 10px;
}
input {
display: block;
}
.active {
top: -20px;
opacity: 1;
background-color: $input-background;
z-index: 1000;
}
<form id="sign-up-form">
<fieldset>
<label id="yourname" for="yourName">Your Name</label>
<input
class="form-control"
type="text"
size="30"
autocomplete="off"
tabindex="0"
required
/>
</fieldset>
</form>
Before removing active class from nameText, you need to check whether the input is empty or not. If the input is empty, there is no need to remove active class from nameText. See below code snippet.
inputText.addEventListener("focusout", (e) => {
if(inputText.value.length == 0)
nameText.classList.remove("active");
});
Additionally, String.prototype.trim should also be used to check for whitespaces in inputText.
Related
Id like to make a component in react that allows me to have a textarea with tags that can be inserted when clicked from a dropdown. Id also like this textarea to be able to mix text aswell. I have currently been trying to use tagify with react but I cant seem to figure out a way to the tagify's function that adds the tag to be accessed by the onClick that is connected to the dropdown.
Any ideas?
I believe you can get your answer in this URL of other question asked on StackOverflow https://stackoverflow.com/a/38119725/15405352
var $container = $('.container');
var $backdrop = $('.backdrop');
var $highlights = $('.highlights');
var $textarea = $('textarea');
var $toggle = $('button');
// yeah, browser sniffing sucks, but there are browser-specific quirks to handle that are not a matter of feature detection
var ua = window.navigator.userAgent.toLowerCase();
var isIE = !!ua.match(/msie|trident\/7|edge/);
var isWinPhone = ua.indexOf('windows phone') !== -1;
var isIOS = !isWinPhone && !!ua.match(/ipad|iphone|ipod/);
function applyHighlights(text) {
text = text
.replace(/\n$/g, '\n\n')
.replace(/[A-Z].*?\b/g, '<mark>$&</mark>');
if (isIE) {
// IE wraps whitespace differently in a div vs textarea, this fixes it
text = text.replace(/ /g, ' <wbr>');
}
return text;
}
function handleInput() {
var text = $textarea.val();
var highlightedText = applyHighlights(text);
$highlights.html(highlightedText);
}
function handleScroll() {
var scrollTop = $textarea.scrollTop();
$backdrop.scrollTop(scrollTop);
var scrollLeft = $textarea.scrollLeft();
$backdrop.scrollLeft(scrollLeft);
}
function fixIOS() {
// iOS adds 3px of (unremovable) padding to the left and right of a textarea, so adjust highlights div to match
$highlights.css({
'padding-left': '+=3px',
'padding-right': '+=3px'
});
}
function bindEvents() {
$textarea.on({
'input': handleInput,
'scroll': handleScroll
});
$toggle.on('click', function() {
$container.toggleClass('perspective');
});
}
if (isIOS) {
fixIOS();
}
bindEvents();
handleInput();
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 30px;
background-color: #f0f0f0;
}
.container, .backdrop, textarea {
width: 460px;
height: 180px;
}
.highlights, textarea {
padding: 10px;
font: 20px/28px 'Open Sans', sans-serif;
letter-spacing: 1px;
}
.container {
display: block;
margin: 0 auto;
transform: translateZ(0);
-webkit-text-size-adjust: none;
}
.backdrop {
position: absolute;
z-index: 1;
border: 2px solid #685972;
background-color: #fff;
overflow: auto;
pointer-events: none;
transition: transform 1s;
}
.highlights {
white-space: pre-wrap;
word-wrap: break-word;
color: transparent;
}
textarea {
display: block;
position: absolute;
z-index: 2;
margin: 0;
border: 2px solid #74637f;
border-radius: 0;
color: #444;
background-color: transparent;
overflow: auto;
resize: none;
transition: transform 1s;
}
mark {
border-radius: 3px;
color: transparent;
background-color: #b1d5e5;
}
button {
display: block;
width: 300px;
margin: 30px auto 0;
padding: 10px;
border: none;
border-radius: 6px;
color: #fff;
background-color: #74637f;
font: 18px 'Opens Sans', sans-serif;
letter-spacing: 1px;
appearance: none;
cursor: pointer;
}
.perspective .backdrop {
transform:
perspective(1500px)
translateX(-125px)
rotateY(45deg)
scale(.9);
}
.perspective textarea {
transform:
perspective(1500px)
translateX(155px)
rotateY(45deg)
scale(1.1);
}
textarea:focus, button:focus {
outline: none;
box-shadow: 0 0 0 2px #c6aada;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="backdrop">
<div class="highlights"></div>
</div>
<textarea>This demo shows how to highlight bits of text within a textarea. Alright, that's a lie. You can't actually render markup inside a textarea. However, you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely. Hit the toggle button to peek behind the curtain. And feel free to edit this text. All capitalized words will be highlighted.</textarea>
</div>
<button>Toggle Perspective</button>
Reference- https://codepen.io/lonekorean/pen/gaLEMR for example
I have a checkbox pseudo element which substitutes hidden checkbox input, and I want to highlight it when hidden checkbox is required. Is there any css solution? What is the right way to solve problem?
https://jsfiddle.net/ht2c9sbd/3/
<form>
<div class="group-input">
<input type="checkbox" id="c_1" required hidden="">
<label for="c_1">I agree with everything.</label>
</div>
<input type="submit" value="submit" id="submit">
</form>
css:
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
height: 30px;
width: 30px;
margin: 0 14px 0 0;
cursor: pointer;
vertical-align: middle;
position: absolute;
left: 0;
top: calc(50% - 15px);
-webkit-transition: background-color 0.25s ease, border-color 0.25s ease;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
height: 30px;
width: 30px;
border: 1px solid rgba(20, 61, 139, 0.2);
margin: 0 14px 0 0;
cursor: pointer;
vertical-align: middle;
position: relative;
top: -2px;
}
input[type="checkbox"]:checked + label::before {
background-image: url(https://image.flaticon.com/icons/png/512/447/447147.png);
background-size: 15px;
border: 1px solid rgba(20, 61, 139, 0);
background-color: rgba(20, 61, 139, 0.2);
background-position: center;
background-repeat: no-repeat;
}
here is my horrible js solution:
function checkCheckbox(e) {
if (!e.checked) {
$('head').append('<style id="invalidCheckbox">input[type="checkbox"] + label::before {border: 1px solid #ff3535; box-shadow: 0 0 2px #ff3535;}</style>');
return false;
} else {
let temp = $('head style:last');
while(temp && temp[0].id === "invalidCheckbox"){
temp.remove();
temp = $('head style:last');
}
return true;
}
}
const mycheckbox = document.getElementById('c_1');
document.getElementById("submit").addEventListener('click', function(e){
e.preventDefault();
checkCheckbox(mycheckbox);
});
Script:
const mycheckbox = document.getElementById('c_1');
document.getElementById("submit").addEventListener('click', function(e){
e.preventDefault();
if ( mycheckbox.hasAttribute('required') && !mycheckbox.checked ){
mycheckbox.className = "invalid-input"; // <-- add new class
} else {
mycheckbox.className = "";
}
});
Style (you can change style as you want) :
input[type="checkbox"].invalid-input + label::before{
background-color: red;
}
Try to update the existing DOM element instead of creating a new element in DOM because DOM manipulation is slow.
A repaint occurs when changes are made to an elements skin that changes visibly but does not affect its layout.
Create new DOM element is even more critical to performance because it involves changes that affect the layout of a portion of the page
To highlight a required checkbox:
In CSS:
/* Style (any) element with the required attribute: */
:required {
background: red;
}
/* Style input elements with the required attribute: */
input:required {
box-shadow: 1px 1px 10px rgba(200, 0, 0, 0.5);
}
/* Style focused and required element: */
input:required:focus {
border: 2px solid red;
outline: none;
}
/* Style hover and required element: */
input:required:hover {
opacity: 1;
}
In JS:
// Get the element
var req = document.getElementById("my_checkbox").required;
// Check if required
if(req.hasAttribute('required')) {
// Style it
req.style.background = "red";
}
Here is what I try to acomplish: I need an input field containing a value with a unit, that would look like this:
On focussing the input, I want it to move the unit to the right side, looking like this:
I can think of two ways to do so:
1. Replace input field with a Div that looks exactly like the input when focus is lost, and set the value of the input as its content:
$('#fakeInput').bind('click', changeToRealInput);
$('#realInput').bind('blur', changeToFakeInput);
$('#realInput').trigger('blur');
$('#unitAddon').html($('#realInput').attr('unit'));
function changeToFakeInput() {
// hide actual input and show a div with its contents instead
$('#fakeInput').show();
$('#realInputContainer').hide();
$('#fakeInput').html($('#realInput').val() + $('#realInput').attr('unit'));
}
function changeToRealInput() {
// hide fake-div and set the actual input active
$('#fakeInput').hide();
$('#realInputContainer').show();
$('#realInput').focus();
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
div#container {
display: flex;
background: #8aaac7;
padding: 10px;
width: 200px;
}
div#unitAddon,
input#realInput,
div#fakeInput {
font-family: sans-serif;
font-size: 26px;
padding: 5px;
width: 100%;
background-color: #FFFFFF;
border: none;
outline: none;
}
div#realInputContainer,
div#fakeInput {
border: 2px solid #dadada;
}
div#realInputContainer {
display: flex;
}
div#unitAddon {
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="fakeInput"></div>
<div id="realInputContainer">
<input type="number" unit="kg" id="realInput" value="3.3">
<div id="unitAddon"></div>
</div>
</div>
(also see this jsFiddle)
Problem here is (as you can see in the screenshot above) that, depending on your local settings, chrome automatically converts the decimal point into a comma (in the input, but not in the fake-div)
Another way I thought of is: When the focus is lost, set the size of the input field to match its content and, by doing so, pull the addon displaying the unit just behind the number.
Problem here is to get the size of the content of an input (cross-browser):
$('#realInput').bind('focus', changeToRealInput);
$('#realInput').bind('blur', changeToFakeInput);
$('#realInput').trigger('blur');
$('#unitAddon').html($('#realInput').attr('unit'));
function changeToFakeInput() {
// here is the question: what width should it be?
$('#realInput').css({'width' : '40%'});
}
function changeToRealInput() {
$('#unitAddon').css({'width' : 'auto'});
$('#realInput').css({'width' : '100%'});
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
div#container {
display: flex;
background: #8aaac7;
padding: 10px;
width: 300px;
}
div#unitAddon,
input#realInput{
font-family: sans-serif;
font-size: 26px;
padding: 5px;
width: 100%;
border: none;
outline: none;
}
div#realInputContainer {
border: 2px solid #dadada;
display: flex;
background-color: #FFFFFF;
}
div#realInputContainer.setAddonAway > div#unitAddon {
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="realInputContainer" class="setAddonClose">
<input type="number" unit="kg" id="realInput" value="3.3">
<div id="unitAddon"></div>
</div>
</div>
also see this jsFiddle
I could accomlish this with an input[type=text], but I dont want to loose the benefits of type[number] (min/max/step validation, on-screen keyboard, etc.)
Is there any way of getting around the flaws of my two ideas? Or is thre a more elegant way to do so?
The idea is to: (1) make the input box to cover the entire container; (2) create a helper element, and set it the same length as the input value via JS, and make it invisible as a place holder; (3) apply some style for moving around the unit box.
codepen
$(document).ready(function() {
$(".value").text($(".number").val());
$(".unit").text($(".number").attr("unit"));
$(".number").on("change keypress input", function() {
$(".value").text($(".number").val());
});
});
* {
box-sizing: border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.container {
position: relative;
display: flex;
border: 4px solid teal;
width: 200px;
}
.container > * {
font-family: sans-serif;
font-size: 20px;
}
.number {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
.value {
visibility: hidden;
max-width: 100%;
overflow: hidden;
}
.unit {
position: relative;
flex: 1;
pointer-events: none;
background: white;
}
.number:focus ~ .value {
flex: 1;
}
.number:focus ~ .unit {
flex: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<input class="number" type="number" value="1.23" unit="kg">
<span class="value"></span>
<span class="unit"></span>
</div>
Intended behaviour
I have a checkbox inside of a div element. I want both the box and the div to be clickable.
When the checkbox is clicked by the user, a class is added to the div to change its background colour. This class is then removed if the checkbox is clicked again.
When the div itself is clicked, the class with the background colour is added or removed as appropriate and the checkbox is ticked or unticked too
Currently, I have most of this working using plain javascript:
function boxPress(markNumber) {
var checkbox = "mark" + markNumber;
var element = document.getElementById(checkbox);
var markbox = "markbox" + markNumber;
if (element.getAttribute("checked") == null) {
element.setAttribute("checked", "checked");
document.getElementById(markbox).classList.add('checked');
} else {
element.removeAttribute("checked");
document.getElementById(markbox).classList.remove('checked');
}
}
.mark {
margin-bottom: 5px;
margin-top: 5px;
background-color: #FFFFFF;
border-width: 2px;
border-radius: 0px 5px 5px 0px;
border-left-style: solid;
border-left-width: 10px;
border-color: lime;
overflow: auto;
padding: 2%;
transition: background-color 0.5s linear 0s;
cursor: pointer;
}
.checked {
background-color: #66ff66;
}
.mark:hover {
background-color: #fffcaf;
}
.checked:hover {
background-color: #b3ffb3;
}
.flex-container {
display: -webkit-flex;
display: flex;
align-items: center;
margin: 0px;
padding: 0px;
}
.flex-mark {
width: 85%;
margin: 0px;
}
.flex-tick {
width: 15%;
margin: 0px;
text-align: center;
}
.flex-tick input {
width: 40px;
height: 40px;
}
<div class="mark col-12 col-m-6" id="markbox0" onclick="boxPress(0)">
<div class="flex-container">
<div class="flex-mark">
<p>Candidate introduces themself by first name, surname and role</p>
</div>
<div class="flex-tick"><input type="checkbox" id="mark0"></div>
</div>
</div>
This works perfectly, apart from where the user first interacts with the checkbox, then later with the div element.
Steps to reproduce the problem in the above snippet:
Click the div. The background changes and the checkbox is ticked.
Click the div again. The changes are reversed as expected.
Click the checkbox. The background change is applied.
Click the checkbox again. The change is reversed as expected.
Now click the div again. The background changes happen but the checkbox remains unticked
Even more interestingly, the HTML of the checkbox reads:
<input type="checkbox" id="mark0" checked="true">
Yet the browser doesn't render the box as checked.
Why is this happening, and why is it only a problem when the div click comes after the box click? It happens in both Chrome and Edge.
There is a difference between the attribute checked and the checked state of a checkbox. Fixed code below.
Explanation:
Because the checked attribute can be set in the markup to "pre-check" the checkbox the DOM has to have a checked state for the checkbox or it would be impossible to "un-check" it. A checkbox that could not be un-checked wouldn't be very useful.
When you set the attribute for the first time (with javascript) it checks the box just like if you had put it in the HTML but the DOM ignores the attribute after that because it needs to rely on the checked state as explained above.
function boxPress(markNumber) {
var checkbox = "mark" + markNumber;
var element = document.getElementById(checkbox);
var markbox = "markbox" + markNumber;
if (element.getAttribute("checked") == null) {
element.setAttribute("checked", "true");
element.checked = true;
document.getElementById(markbox).classList.add('checked');
} else {
element.removeAttribute("checked");
element.checked = false;
document.getElementById(markbox).classList.remove('checked');
}
}
.mark {
margin-bottom: 5px;
margin-top: 5px;
background-color: #FFFFFF;
border-width: 2px;
border-radius: 0px 5px 5px 0px;
border-left-style: solid;
border-left-width: 10px;
border-color: lime;
overflow: auto;
padding: 2%;
transition: background-color 0.5s linear 0s;
cursor: pointer;
}
.checked {
background-color: #66ff66;
}
.mark:hover {
background-color: #fffcaf;
}
.checked:hover {
background-color: #b3ffb3;
}
.flex-container {
display: -webkit-flex;
display: flex;
align-items: center;
margin: 0px;
padding: 0px;
}
.flex-mark {
width: 85%;
margin: 0px;
}
.flex-tick {
width: 15%;
margin: 0px;
text-align: center;
}
.flex-tick input {
width: 40px;
height: 40px;
}
<div class="mark col-12 col-m-6" id="markbox0" onclick="boxPress(0)">
<div class="flex-container">
<div class="flex-mark">
<p>Candidate introduces themself by first name, surname and role</p>
</div>
<div class="flex-tick"><input type="checkbox" id="mark0"></div>
</div>
</div>
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
Does anyone knows how can i make an effect like this in my search bar:
https://www.dropbox.com/help
<input type="text" name="input">
I mean the onFocus and onBlur effect with the text disappearing and appearing dynamically.
Thank you folks!
They use CSS Animations on the color property:
Excerpt from their main.css:
.sick-input.focused label{ color:#ccc;transition:color .2s linear 0;
-webkit-transition:color .2s linear 0;
-moz-transition:color .2s linear 0 }
You can mimic the effect using the :focus pseudo selector on the input field with the previously mentioned definitions.
If for some reason I wasn't clear enough :)
http://jsfiddle.net/d9CMR/
More robust solution:
http://jsfiddle.net/d9CMR/3/
Update (with proper color change):
http://jsfiddle.net/d9CMR/6/
Source:
HTML
<input type="text" name="input" data-default="fubar">
CSS
input { color:#333; }
input:focus { color:#ccc;transition:color .2s linear 0;
-webkit-transition:color .2s linear 0;
-moz-transition:color .2s linear 0 }
input.typing { color:#333; }
Script
$(function(){
var input = $('input[name="input"]'),
defaulttext = input.attr('data-default');
input.val(input.attr('data-default'));
input.on('focus', function(){
if(input.val() != defaulttext)
input.addClass('typing');
else
input.removeClass('typing');
}).on('keydown', function(){
if(defaulttext == input.val()) input.val('');
input.addClass('typing');
}).on('blur', function(){
if(input.val() == '') input.val(defaulttext);
that.removeClass('typing');
});
});
Try this - used HTML and CSS from the Dropbox site ....
HTML :
<div class="sick-input" id="anonymous_element_3">
<label for="search-input">Type your question here</label>
<input type="text" id="search-input" name="search_string" value="" tabindex="1">
</div>
CSS :
.sick-input label {
font-size: 16px;
position: absolute;
left: 8px;
top: 6px;
cursor: text;
pointer-events: none;
color: #777;
}
.sick-input.populated label {
display: none;
}
input {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-moz-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
-webkit-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
box-shadow: 0 0 0 #000, inset 0 3px 3px #eee;
font-size: 16px;
border: 1px solid #BFBFBF;
padding: 5px;
width: 500px;
}
.sick-input.focused label {
color: #ccc;
transition: color .2s linear 0;
-webkit-transition: color .2s linear 0;
-moz-transition: color .2s linear 0;
}
JavaScript :
$('#search-input').keyup(function() {
if ($(this).val() === '') {
$('.sick-input').removeClass('populated');
} else {
$('.sick-input').addClass('populated');
}
})
$('#search-input').focus(function() {
$('.sick-input').addClass('focused');
});
$('#search-input').blur(function() {
$('.sick-input').removeClass('focused');
});
Working example here
Here is an example:
HTML
<div>
<label for="search">Search this site</label>
<input type="text" id="search" placeholder="Search this site" />
</div>
CSS
body { padding: 20px; }
div { position: relative; }
div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; }
div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; }
.populated label { display: none; }
Javascript
$('input').on('keydown keypress keyup', function(e) {
if($('input').val() == '') {
$('div').removeClass('populated');
}
else {
$('div').addClass('populated');
}
});
And if you don't want to use placeholder attribute then use this:
HTML
<div>
<label for="search">Search this site</label>
<input type="text" id="search" value="Search this site" />
</div>
Javascript
$('input').on('keydown keypress keyup', function(e) {
if($('input').val() == '') {
$('div').removeClass('populated');
}
else {
$('div').addClass('populated');
}
}).on('focus', function(e) {
var $this = $(this);
if($this.val() == $this.data('placeholder')) {
$this.val('');
}
}).on('blur', function(e) {
var $this = $(this);
if($this.val() == '') {
$this.val($this.data('placeholder'));
}
}).data('placeholder', $('input').val());
And if you don't want to use value attribute of input field then this might help:
HTML
<div>
<label for="search">Search this site</label>
<input type="text" id="search" value="" />
</div>
CSS
body { padding: 20px; }
div { position: relative; }
div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; }
div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; }
.populated label { display: none; }
.focused label { color: #aaa; }
Javascript
$('input').on('keydown keypress keyup', function(e) {
if($('input').val() == '') {
$('div').removeClass('populated');
}
else {
$('div').addClass('populated');
}
}).on('focus', function(e) {
$('div').addClass('focused');
}).on('blur', function(e) {
$('div').removeClass('focused');
});
You could also use the html5 placeholder="" attribute, which has a similar effect.
And use a jquery fallback for older browser: https://github.com/mathiasbynens/jquery-placeholder
Can you try This
Javascript Code
function txtblur()
{
document.getElementById('txtval').value="";
}
function textblur()
{
document.getElementById('txtval').value="Enter word to search";
}
HTML Text box Code
<input type="text" class="tbct" name="txtval" id="txtval" value="Enter word to search" onfocus="txtblur()"/>
You can also set a background image sprite containing the desired text to the input field if the height or width are known, and just adjust the background-position on the onfocus and onblur events.