动态检查文本输入答案

【问题标题】：Dynamically check text input动态检查文本输入
【发布时间】：2013-04-26 07:37:27
【问题描述】：

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

谢谢你的帮助！

【问题讨论】：

你希望如果用户输入一个字符串然后它变成感叹号，现在当你输入字母时它会改变，那么字符串和字母有什么区别？
字符串也可以包含数字，对吧？但是，我无法正确获取主要机制，以便代码检查用户是否输入了某些内容并提供视觉反馈（例如感叹号）。

标签： jquery text input

【解决方案1】：

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

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

而不是：

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

这是更正代码的最简单方法，但可能不是实现所需的最佳方法。

$('input').keyup() 是完全控制实时验证的好方法，但您也可以查看validation plugin of jQuery。

编辑

示例使用 span id 而不是在 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 中生成。

【讨论】：

感谢您的快速回答，非常感谢。那将是我的下一个问题：我的方法是正确的还是有更好的方法来解决我想做的事情？
$('input').keyup() 是一个好方法，只是.parent().children() 不是很整洁。您可以添加一些 id 来获取与您的 input 标签相对应的 span 标签。
true 但问题是我必须为每个文本输入分配一个 ID。如果有 10 个输入，我需要 10 个 ID。我只想让我的代码尽可能灵活。你怎么看？
您可以在创建 span 标签时自动添加一个 id，该 id 可以是表单名称和输入名称的某种组合（与您的代码不同，它应该是唯一的）。
好主意！唯一的问题是您必须存储所有 ID，因为您的代码仅适用于一个输入字段。我确实喜欢使用输入参数创建唯一 ID 的想法。

【解决方案2】：

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

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

【讨论】：