CODEWITHSUNDEEP
jquerycss
zazvorniki
zazvorniki

Reputation: 3602

Making the text in input fields blurred out

I'm wondering if this is possible or not. I have a timeout plugin in place so that if my user walks away form the computer a warning message comes down and then they can click anywhere to continue.

My issue is when the warning screen comes down the information that have entered in the input fields on the background page need to be obscured so if someone looks at the screen they wont be able to see what has been typed in.

I was thinking about blurring the info in the input fields using either css or jQuery. I have looked around the interwebs to see if anyone else has done this, but all I could find were blurring the edges of input fields.

Any help would be great!

Upvotes: 4

Views: 1625

Answers (5)

emerson.marini
emerson.marini

Reputation: 9348

Like I mentioned in the comments, you could just set the color as the same as the element background-color:

// Elements to manipulate. Any input, textarea and select,
// ignoring the buttons (for this example).
var els = $(":input:not(button)");
// Store the current color,
var defaultColor = els.first().css("color");
// Store the current background-color.
var bgColor = els.first().css("background-color");

// I'm using a button to hide the elements.
// You'll have your own event to fire this up.
$("#hide").on("click", function () {
    // Set the color of all elements to be the same as their
    // background-color.
    els.css("color", bgColor);
});

// I'm using a button to show back the elements.
// You'll have your own event to fire this up.
$("#show").on("click", function () {
    // Restore the color of all elements to their default.
    els.css("color", defaultColor);
});

Demo

jQuery :input selector

Upvotes: 0

davidcondrey
davidcondrey

Reputation: 36003

enter image description here

body input,body textarea{box-shadow:0 0 5px 5px rgba(0,0,0,.2) !important;border-color:rgba(0,0,0,.05) !important;resize:none !important;opacity:.5 !important;}
body input,body input[type="file"],body input[type="checkbox"],body input[type="radio"],
body textarea{opacity:.4 !important;background:transparent none !important;color:transparent;text-shadow:0 0 5px rgba(0,0,0,0.5);}

<form>
    <fieldset>
        <legend>form elements</legend>
        <ul>
            <li>
                <label>textbox <input value="textbox" /></label>
            </li>
            <li>
                <label>textbox <textarea>textarea</textarea></label>
            </li>
            <li>
                <label>upload <input type="file" /></label>
            </li>
            <li>
                <button>button</button>
            </li>
            <li>
                <label><input type="checkbox" /><span>checkbox</span></label>
            </li>
            <li>
                <label><input type="radio" /><span>radio button</span></label>
            </li>
            <li>
                <select>
                    <option>selectbox</option>
                    <option>selectbox</option>
                    <option>selectbox</option>
                </select>
            </li>
        </ul>
    </fieldset>
</form>

Upvotes: 0

Amin Jafari
Amin Jafari

Reputation: 7207

here you go, the idea I mentioned in the comments: DEMO

var time=function(){
    $('input').css('color','transparent');
    $('p').html('click anywhere');
}
setTimeout(time,5000);
$(document).click(function(){
    $('input').css('color','black');
    $('p').html('Wait for 5 seconds');
    setTimeout(time,5000);
});

Upvotes: 3

raam86
raam86

Reputation: 6871

Applying css3 blur filter to the input element like:

input,textarea{
   filter: blur(1px);
  -webkit-filter: blur(1px);
}

but it is not cross browser enter image description here will give you this result:

Upvotes: 0

Luiz Rossi
Luiz Rossi

Reputation: 892

Maybe you can hide the fileds.

Like $(.filled).hide()

Upvotes: 0

Related Questions