JS/HTML5/Meteor 如何将输入更改为标签？答案

【问题标题】：JS/HTML5/Meteor How to change an input to a label?JS/HTML5/Meteor 如何将输入更改为标签？
【发布时间】：2013-08-09 06:38:30
【问题描述】：

我在 html 中有一个输入表单，如下所示：

<input type = "text" id ="name" placeholder = "Name"/>

我可以通过以下方式更改“占位符”值：

document.getElementById('name').placeholder = Session.get("username")

在将用户名设置为初始输入之后，但我想将输入实际更改为标签（假设是带有强的 p 标签），其中 Session.get("username") 作为其值。怎么样？

【问题讨论】：

标签： javascript html meteor

【解决方案1】：

使用反应性和模板的组合来实现你需要的 Meteor 方式。

模板名称.html

<template name="template_name">
    {{#if username}}
        <p><strong>{{username}}</strong></p>
    {{else}}
        <form>
            <input type="text" name="username" placeholder="username" required />
            <button type="submit">Submit</button>
        </form>
    {{/if}}
</template>

template_name.js

Template.template_name.helpers({
    username:function(){
        return Session.get("username");
    }
});

Template.template_name.events({
    "submit form":function(event,template){
        event.preventDefault();
        var username=template.find("input[name='username']").value;
        Session.set("username",username);
    }
});

当您的模板首次呈现时，用户名助手将未定义，else 分支将显示输入。当您稍后在验证用户输入后设置 Session 变量时，它将重新呈现并显示在标签内。

【讨论】：

我收到一个“提交表单”：function(event, template){ SyntaxError: Unexpected string 有什么想法吗？
刚刚创建了一个空项目来测试我的一段代码：它按预期工作，没有任何语法错误，所以问题一定来自代码的另一部分。

【解决方案2】：

您可以使用replaceChild() 和document.createElement()：

var newP = document.createElement('p'),
    newStrong = document.createElement('strong'),
    text = document.createTextNode(Session.get('username')),
    input = document.getElementById('name');

newStrong.appendChild(text);
newP.appendChild(newP);
input.parentNode.replaceChild(newP, input);

参考资料：

Node.appendChild()。
Node.replaceChild()。

【讨论】：

【解决方案3】：

你可以使用反应性：

你的 JS（客户端）

Template.hello.placeholder = function() {
    return Session.get("username");
}

你的 HTML

<template name="hello">
    <input type = "text" id ="name" placeholder = "{{placeholder}}"/>
</template>

一旦您使用Session.set("username",new value) 更改它，新值就会被被动应用。

【讨论】：