如何在输入中模糊文本模糊事件

how to blur text onblur event in an input

本文关键字：模糊 文本 事件 输入      更新时间：2023-09-26

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

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

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*/();
}

文本模糊的乐趣 

.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

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

document.FormName.fname.blur();

试试这个。

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

#naam{
   // Style this as you want it on blur
}
#naam:focus{
    // Style this as you want it when focused
}
相关文章：