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

实现 onblur 事件的最简单方法是使用

document.FormName.fname.blur();

尝试这个。

Answer 2

有趣的模糊文本

.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

Answer 3

当元素（在本例中为输入）失去焦点时，会发生 onblur 事件。您只能使用 css 来实现这一点。

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

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