替換跨度元素旁邊的輸入值

Question

我必須輸入以下內容：

<input type="text" id="my_input" />

用戶在輸入中輸入任何內容后，我必須將此內容附加到跨度旁邊。

<p id="patient_provider" >
  <span>
    Name
  </span>
  Sam
</p>

我使用的代碼是（應該如下所示）：

  $("#patient_provider").html($('#patient_provider').children()[0]+$('#my_input').val());

但這是行不通的。

它顯示如下：

[object HTMLSpanElement] Sam

另外請注意：

直接在范圍上實現了一些CSS，我無法添加另一個范圍

Answer 1

$('#patient_provider').children()[0]是一個元素，並轉換為[object HTMLSpanElement]字符串

右邊是：

 $("#patient_provider").html($('#patient_provider').children()[0].outerHTML+$('#my_input').val());

Answer 2

如果您有能力更改標記，我會這樣做。 像這樣-用有用的類將名稱應出現在元素中的位置包裹起來。 在這種情況下，我使用了一個類name為span ：

<input type="text" name="name" id="my_input">
<p id="patient_provider" >
  <span>Name</span>
  <span class="name">Sam</span>
</p>

然后，可以通過執行以下操作來改進您的JavaScript：

// No-conflict-mode-safe document ready
jQuery(function($) {
    // Find the right input based on the name, and bind to keyup
    $('input[name="name"]).on('keyup', function() {
        // Put the value of the input into the span.name element
        $('#patient_provider .name').text($(this).val());
    );
});

Answer 3

嘗試這個，

的HTML

<input type="text" id="my_input" />

<p id="patient_provider" >
  <span>
    Name:
  </span>
  <span class="patient_name">
      Sam
  </span>
</p>

JS

 var patientName = $(".patient_name").text();
 var editedName = false;

 $('#my_input').bind('keydown', function(){
    if(editedName == false){
        $(".patient_name").html($(this).val());
         patientName = $(".patient_name").text();
        editedName = true;
    }
 });

 $('#my_input').bind('keyup', function(){
    if(editedName == true){
            $(".patient_name").text(patientName + $(this).val());
    }
 });

JS小提琴

https://jsfiddle.net/guruling/8afzf4dv/

Answer 4

您現在擁有的方式，該代碼將只運行一次。 您需要將其包裝在事件偵聽器中，以便每當用戶更改輸入或單擊Enter按鈕時它便會運行。