替换跨度元素旁边的输入值

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按钮时它便会运行。