Question

我有一份注册表格，要求提供一些基本细节。我希望能够将此人的名字添加到同一页面上的问题中，而无需提交表格即可。

即。当页面加载时，问题是“参加者1是代表吗？”，但是当他们输入他们的名字时，它会变成“马修是代表吗？”

问题在同一页面上，所以我知道必须以某种方式使用jQuery ...

非常感谢任何帮助。

Answer 1

你应该使用你的OnBlur属性。在OnBlur中调用一个函数，该函数从输入中提取数据并将其放入标签中。

在HTML中使用标记来包围您要动态替换的数据。使用JavaScript或JQuery找到这些标记并替换其中的数据。

Answer 2

如果您的HTML看起来像这样

<div>Is <strong id='name'>Attendee 1</strong> a delegate?</div>
<input type='text' id='name-input'></input>

然后你可以在没有这样的jQuery的情况下实现这个目标：

window.addEventListener('load', init);

function init() {
  var input, name;
  input = document.getElementById('name-input');
  name = document.getElementById('name');

  input.addEventListener('change', function() {
    var value = input.value;
    if(value.length === 0) {
      value = 'Attendee 1';
    }
    name.innerHTML = value;
  });

}

当然，你可以用jQuery做同样的事情，但这正是双向绑定库和框架所适用的那种东西。这就是我将如何在AngularJS中进行的。

<div ng-controller='MyFormController'>
  <div>Is <strong ng-bind='name'></strong> a delegate?</div>
  <input type='text' ng-model='name'></input>
</div>

和JS：

function MyFormController($scope) {
   $scope.name = 'Attendee 1';
}

Angular，Ember，Backbone和Knockout都是值得关注的好东西！

Answer 3

你可以这样做：

<html>
   <head>
        <title>Title</title>
   </head>
   <body>
        <input type="text" id="name" name="name" onChange="document.getElementById('name_new').innerHTML = document.getElementById('name').value"/>
        <div> Is <strong id='name_new'>Attendee 1</strong> a delegate?</div>
   </body>
</html>

更改HTML作为输入字段更改

3 个答案: