1

我想创建一个输入表单，在每个必填字段的框后都有一个星号。如果用户输入字符串，星号应变为感叹号。现在，每次用户键入字母时，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>")
    }
 });

谢谢你的帮助！

4

2 回答 2

1

您的主要问题是每次调用它时.after都会添加一个span元素，您可以使用返回 previsouly 创建的 span 元素.parent().children("span")，然后更改其内容：

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

代替 ：

$(this).after("<span>!</span>")

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

这$('input').keyup()是一个完全控制实时验证的好方法，但你也可以看看validationjQuery 的插件。

编辑

使用spanid 而不是在 DOM 树中导航的示例，这将允许您将span标签移动到 HTML 树中的任何位置，而不会破坏 JavaScript 代码：

$(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标签及其对应的标签id可以静态编写在 HTML 中或由服务器生成，而不是由客户端在 JavaScript 中生成。

于 2013-04-26T07:42:30.897 回答
0

你应该使用.foucsout()。一旦文本字段失去焦点，例如，通过按 Tab 键跳转到下一个字段或按钮。在.focusout()回调中测试长度并附加“！”

另外，请参阅@zakinster 解决方案。他的解决方案将帮助您将“*”替换为“！”。正如我所理解的那样，我建议使用 .focusout()，以便在用户完成输入后将星号替换为感叹号，然后可以判断他的输入。

于 2013-04-26T07:42:56.797 回答