javascript - 根据数据属性更新输入的 div

Question

我想要文本预览来显示页面的示例布局。因此，当我放置标题时，它的文本将根据 data-target 值显示在标题 div 中。这意味着我有多个输入要做。

所以我编写了代码，但不知何故它没有将预览文本发送到所需的 div。我的 jquery 和英语都不好，抱歉。

HTML

<div id="h1"></div>
<div id="h2"></div>
<hr />

<input type="text" onkeypress="livePreview(this.value);" data-target="h1" placeholder="h1 value" />
<input type="text" onkeypress="livePreview(this.value);" data-target="h2" placeholder="h2 value" />

Javascript

        var timerHandle = false; // global!
        function livePreview(what) {
          $('div').data('target').html(what);//use target to display in div
          if (timerHandle) clearTimeout(timerHandle);
          timerHandle = setTimeout(sendItOff, 500); // delay is in milliseconds
        }

        function sendItOff() {
          what = document.getElementsByClassName("live").value;
          console.log("Sending " + what);
        }

这是 fiddle :https://jsfiddle.net/ue2aysdq/1/

Answer 1

如果您想要实时预览，请使用 keyup 事件将其绑定(bind)到输入字段:

        $('input[data-target]').keyup(function() {
          var el = '#' + $(this).attr('data-target');//build the id for the preview element
          $(el).text($(this).val());//change the elements text with the value of the input field
        });

演示:https://jsfiddle.net/ue2aysdq/11/