Javascript 验证文本输入并在输入长度为5个字符时输出“完成”div
我已经用javascript编写了这段代码,但是我必须使用JQuery使其正常工作,我已经包含了javascript函数和JQuery尝试,但是我无法找出我的JQuery尝试有什么问题,有人能帮我吗 Javascript工作:Javascript 验证文本输入并在输入长度为5个字符时输出“完成”div,javascript,jquery,html,Javascript,Jquery,Html,我已经用javascript编写了这段代码,但是我必须使用JQuery使其正常工作,我已经包含了javascript函数和JQuery尝试,但是我无法找出我的JQuery尝试有什么问题,有人能帮我吗 Javascript工作: function done() { var valid = document.getElementById("text2").value.length; if (valid > 5) { document.getElement
function done()
{
var valid = document.getElementById("text2").value.length;
if (valid > 5)
{
document.getElementById('one').innerHTML += "<div class='done rotateone wiggler'></div>";
document.getElementById('one').className += "grey";
}
Jquery尝试:
$(document).ready(function(){
//Validates the title field is at least 5 characters long.
$("#text2").done(function(){
var value = $(this).val();
if (value.length >= 5)
{
$("#one").append("<div class='done'></div>");
}
});
您可以使用done函数,只需添加一些小的更改来适应jQuery
function done()
{
var valid = $("#text2").val().length;
if (valid > 5)
{
$('#one').append("<div class='done'></div>");
$('#one').addClass("grey");
}
}
看起来您想立即执行您的函数?查看编辑以了解我添加.blur事件处理程序的原因。好的,下面是我的方法:
$(document).ready(function() {
$('#text2').blur(function() { // Listen to the "onblur" event on the element
if (this.value.length > 5) { // No need for jQuery there
$('#one')
.append('<div class="done"></div>')
.addClass('grey')
}
})
})
了解如何通过在单个元素上链接函数来仅使用对DOM的一次调用吗?这既实用又有效
顺便说一句,innerHTML不好的原因有很多,包括jQuery中的prefere.append和javascript中的.appendChild
编辑:看起来您希望在onblur事件中激活此选项。我编辑了我的代码。谢谢你的回复。我编辑了我的代码并用它替换了它,现在什么也没发生。我确实在addClass部分修改了类的拼写。我是不是在错误的地方调用了这个函数,因为当javascript版本运行时,我是这样从输入中调用它的:onblur=doneThank你知道吗?这工作非常完美。现在刚刚进入Jquery,这是一个很大的帮助。看到.blurfn方法了吗?jQuery提供了大量的方法,如.clickfn、.focusfn、.dblclickfn等。它们都是.bind'click',fn方法的快捷方式。我将在后面研究这些方法。再次感谢: