javascript - 如何模糊输入中的文本 onblur 事件

Question

我有一个代码，当用户从相应字段失去焦点时，我希望文本字段中的文本模糊一点

我有一个代码，但我不知道要更改什么，因为我是 javascript 的初学者 我的 html 代码 -

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

和我的 js -

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

Answer 1

Fun with blurred text

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

利用上面的css，可以做出blur的文字效果。然后像这样添加类

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

希望你明白。

更新:

根据您的意见， 如果您使用 jQuery，那么您只需使用 addClass('blurry-text') 添加/删除类/removeClass('blurry-text')。

但是在纯javascript中，你必须这样做

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