Question

我想知道这是否可行。我有一个超时插件，这样如果我的用户从计算机走开，就会发出一条警告消息，然后他们可以点击任何地方继续。

我的问题是当警告屏幕关闭时，在背景页面的输入字段中输入的信息需要被遮挡，因此如果有人看到屏幕，他们将无法看到输入的内容。

我在考虑使用css或jQuery模糊输入字段中的信息。我查看了互联网，看看是否还有其他人这样做过，但我能找到的只是模糊了输入字段的边缘。

任何帮助都会很棒！

Answer 1

在这里，我在评论中提到的想法： 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);
});

Answer 2

也许你可以隐藏这些字段。赞$(.filled).hide()

Answer 3

将css3模糊滤镜应用于输入元素，如：

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

但它不是跨浏览器 enter image description here 会给你这个结果：

Answer 4

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>

Answer 5

就像我在评论中提到的那样，您可以将color设置为与元素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

使输入字段中的文本模糊不清

5 个答案: