动态检查文本输入

时间:2013-04-26 07:37:27

标签: jquery text input

我想在每个必填字段的框后面创建一个带星号的输入表单。如果用户输入字符串,则星号应更改为感叹号。现在,每次用户输入一个字母时,javascript代码都会添加一个感叹号。

HTML:

<form name="form1">
<ul>
<li><input type='text' name ='text1' required placeholder="required"/></li>
<li><input type='text' name ='text1' required placeholder="required"/></li>
<li><input type='text' name ='text1' placeholder="not required"/></li>
</ul>
</form>

JAVA / JQUERY:

 $(function() {
        $('input:required').after( "<span>*</span>" );  

    });

 $('input:required').keyup(function(){
    var dInput = this.value;
    if(dInput.length > 0)
    //if($('input:required').is(':valid'))
    {
        $(this).after("<span>!</span>")
    }
 });

谢谢你的帮助!

2 个答案:

答案 0 :(得分:1)

您的主要问题是 .after每次调用时都会添加span元素,您可以使用{{1}取回预先创建的span元素然后更改其内容:

.parent().children("span")

而不是:

 $(this).parent().children("span").text("!")

这是纠正代码的最简单方法,但可能不是做你想做的最好的方法。

$(this).after("<span>!</span>") 是完全控制实时验证的好方法,但您也可以查看validation plugin of jQuery

修改

使用$('input').keyup() id而不是浏览DOM树的示例,这样您就可以在不破坏JavaScript代码的情况下将span标记移动到HTML树中的任何位置:

span

请注意,要使其正常工作,您的输入应在表单中包含唯一的名称。

另请注意,$(function() { $('input:required').each(function(index) { var id = this.form.name+this.name+"mark"; $(this).after( "<span id='"+id+"'>*</span>" ); }); }); $('input:required').keyup(function(){ if(this.value.length > 0) { var id = this.form.name+this.name+"mark"; $("#"+id).text("!"); } }); 标记及其对应的span可以静态写入HTML或由服务器生成,而不是由客户端在JavaScript中生成。

答案 1 :(得分:0)

您应该使用.foucsout()。一旦从文本字段中丢失焦点,例如,按Tab键跳转到下一个字段或按钮。在.focusout()回调测试长度并附加'!'

另外,请参阅@zakinster解决方案。他的解决方案将帮助您将'*'替换为'!'。至于我理解这一点,我建议使用.focusout(),这样当用户完成输入输入后,它就会将星号替换为感叹号,然后可以判断他的输入。