Заменить входное значение следующего элемента, чтобы охватить

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

Путь у вас есть теперь этот код будет запускаться только один раз. Вам нужно обернуть его в прослушиватель событий, чтобы он выполнялся всякий раз, когда пользователи меняют ввод или когда нажимают кнопку ввода.

Answer 3

Если у вас есть возможность изменить разметку, я бы сделал это. Что-то вроде этого - обертывание места, где имя должно появляться в элементе с полезным классом. В этом случае, я пошел с 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 4

попробовать это,

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/