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

如果你有能力改变标记，我会这样做。类似的事情 - 将名称应出现在包含有用类的元素中的位置包装起来。在这种情况下，我选择span课程name：

<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 Fiddle

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

Answer 4

现在的方式，该代码只运行一次。您需要将其包装在事件侦听器中，以便在用户更改输入或单击输入按钮时运行它。

替换span元素旁边的输入值

4 个答案: