i have a code in which i want the text in a text field to blur a little bit when the user loses focus from the respective field

i have a code but i dont know what to change in it , since i am a beginner in javascript my html code -

Name <input type="text" id="naam" onblur="myFunction()">

and my js -

function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value./*something to make it blur*/();
}

i have a code in which i want the text in a text field to blur a little bit when the user loses focus from the respective field

i have a code but i dont know what to change in it , since i am a beginner in javascript my html code -

Name <input type="text" id="naam" onblur="myFunction()">

and my js -

function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value./*something to make it blur*/();
}

• javascript
• html

• 2 with blur you mean you want a little hazy like effect...blur in javascript means something else..i hope you know it.. – HIRA THAKUR Commented Nov 4, 2013 at 6:26
• just change the css when onblur and onfocus events are fired using their corresponding handlers. You can check my answer. – Md Ashaduzzaman Commented Nov 4, 2013 at 6:34

3 Answers 3

Fun with blurred text

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

Using the above css, you can make a blur text effect. Then add the class like this

var x=document.getElementById("fname");
x.className += ' blurry-text';

Hope you understood.

Updates:

Based on your ments, If you use jQuery, then simply you can add/remove class using addClass('blurry-text') / removeClass('blurry-text').

However in pure javascript, you have to do like this

function blurIt() {
    var x = document.getElementById("naam");
    x.className += ' blurry-text';
}

function focusIt() {
    var x = document.getElementById("naam");
    x.className = x.className.replace("blurry-text", "");
}

JSFiddle

This simplest way to achieve onblur event is to use

document.FormName.fname.blur();

Try this.

The onblur event occurs when the element, in this case the input, loses focus. You could achieve this with css only.

#naam{
   // Style this as you want it on blur
}

#naam:focus{
    // Style this as you want it when focused
}