在輸入中輸入數據，然后僅顯示在頁面上其他位置輸入的文本

Question

我正在創建一個結帳頁面，我無法弄清楚如何執行以下操作。 當客戶輸入他們的送貨信息時，我想在確認部分的頁面下方顯示相同的信息。 在客戶下訂單之前我不會提交信息，所以沒有辦法回應這些信息，因為在提交之前我不會提交給我的數據庫。

我調查了這個並且我看到了具有數據復制功能的東西，這基本上是我需要的，除了我不希望復制的數據顯示在輸入字段中。 我只是想讓它顯示文字。

所以，如果我有以下字段：

航運街：123 Main St.

我希望123 Main St出現在頁面的不同部分。

我試過做數據復制功能，我甚至無法讓它工作。 我不確定這是否是最好的方法。 我不希望復制的數據可以編輯。 我從我的代碼中禁用了它。

我試過這樣做：

<div class="field">
    <label class="paddingleft" for="fullname">Full Name</label>
        <div class="center"><input type="text"  class="biginputbarinline preview" id="ShipToFullname" data-copy="name" name="ShipToFullname" required>          </div>
</div>

這是頁面下方的確認部分：

<p><input type="text" class="preview" id="name" disabled></p>

Jquery

$(document).ready(function() {
$(".preview").keyup(function() {
     var ElemId = $(this).data('copy');
    $("#"+ElemId).val($(this).val());
 });
});

有沒有更好的方法可以做到這一點，最重要的是輸入字段不會顯示復制的數據？

更新的代碼

<div class="center">
    <div class="field">
        <label class="paddingleft" for="fullname">Full Name</label>
        <div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
    </div>

確認部分

<p>Shipping to:</p>
    <p><div class="preview" id="name"></div></p>

Jquery

$(document).ready(function() {
 $(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
 });
});

Answer 1

這是你想要的嗎？

請注意， data-copy="name"現在應該是data-copy="#name"才能生效

 $(document).ready(function() { $(".preview").on('keyup', function() { $($(this).data('copy')).html($(this).val()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="field"> <label class="paddingleft" for="fullname">Full Name</label> <div class="center"> <input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required> </div> </div> <br> Your name is: <div id="name"></div> 

Answer 2

簡單地改變

var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());

至

$('#name').val($('#ShipToFullname').val());

Basicaly它表示將id name的值設置為id ShipToFullname的值

這里的小提琴=> http://jsfiddle.net/9sgcydmg/1/

如果您不想在另一個輸入中輸出數據，您只需將id設置為任何html元素，然后使用：

$（ '＃名稱'）HTML（$（ '＃ShipToFullname'）VAL（））;

這里的小提琴=> http://jsfiddle.net/89oeyq0h/

最終答案：用最簡單的方法，使用jQuery，我會做這樣的事情：

<input onkeyup="$('#name').html(this.value)" ... />
<p id='name'></p>

<input onkeyup="$('#addr').html(this.value)" ... />
<p id='addr'></p>

and so on...

http://jsfiddle.net/oky005a0/