Javascript 使用jQuery检查和清除用户输入的表单

我正试图编写一个脚本，在不重复大量HTML的情况下创建浮动标签。脚本提取输入表单中定义的数据，添加包装器和标签，并清除表单。这很有效。脚本的第二部分根据用户输入隐藏/显示标签，如果用户输入了标题，则删除用户输入，并将值带入标记

下面是一个JSFIDLE和我遇到问题的代码部分

---

非常感谢您的帮助。谢谢

我不会通过DOM创建标签。我会硬编码。这是不必要的行动。通常情况下，标签位于文本输入的左侧或正上方。请参见@johanVandenRym I为某些上下文添加了CSS。最终标签会飘到某个地方，但我想先把脚本拿下来。@arunpjohny真棒！非常感谢。然而，你能解释一下为什么你的工作而我的休息吗？再次感谢！

input.keyup(function(){

    ctn.addClass("active-filled");
    var userText2 = input.val();
    console.log(userText2);

    if(userText2 === ""){
        ctn.removeClass("active-filled");
    }

    input.blur(function(){

        if(userText2 === title){
            ctn.removeClass("active-filled");
        }

    });

});