Как редактировать скрытое поле ввода с помощью jquery и текстового поля?

Question

Я не уверен, что то, что я пытаюсь сделать, возможно вообще. Итак, я успешно создал функцию «drop your images» для сайта, над которым я работаю. Вот как это выглядит (внешний вид улучшится).

Теперь у меня есть это текстовое поле, где я могу редактировать заголовок, но я пытаюсь сделать так, чтобы при вводе текста я мог редактировать части скрытого ввода. Например, заголовок ввода будет редактировать часть Caption внутри скрытого поля ввода.

Вот как это выглядит:

<input value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}"> 

Это код, который я использовал

<div class="addtextTopic"> 
    <div class="leimage"> 
    <img src="funnylookingcar.png"> 
    <input class="tosend" value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}"> 
    </div> 
<textarea class="lecaptine" placeholder="Enter A Caption"></textarea> 
</div> 

    $(document).ready(function() { 
      $(".addtextTopic .lecaptine").onchange(function() { 
       var $cap = $(this) 
       $(".tosend").val($cap); 
      }); 
     }); 

Теперь, приведенный выше код не работает, и по какой-то причине, я начинаю подумайте, что если он сработает, он заменит все значение, а не часть подписи.

Кроме того, я в правильном направлении? это даже возможно?

Answer 1

Сначала измените метод Onchange на change метод и скопировать значение .lecaptline для .tosend использования $cap.val() пожалуйста, найти ниже скрипку для получения дополнительной информации

$(document).ready(function() { 
 
      $(".addtextTopic .lecaptine").change(function() { 
 
      debugger; 
 
       var $cap = $(this); 
 
       $(".tosend").val($cap.val()); 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="addtextTopic"> 
 
    <div class="leimage"> 
 
    <img src="funnylookingcar.png"> 
 
    <input class="tosend" value="meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"","DateStamp":"","Privacy":""}"> 
 
    </div> 
 
<textarea class="lecaptine" placeholder="Enter A Caption"></textarea> 
 
</div>

Answer 2

как насчет изменения, как это?

$('.addtextTopic .lecaptine').bind('input propertychange', function({ 

}); 

Answer 3

Это возможное решение.

http://jsfiddle.net/o2gxgz9r/3167/

$(document).ready(function() { 
    $(".addtextTopic .lecaptine").keyup(function() { 
    var metaDefault = '"meta":{"userId":"le_user","FolderName":"Name Of the Folder","Caption":"{{CAPTION}}","DateStamp":"","Privacy":""}'; 
    var $cap = $(this).val(); 

    $(".tosend").val(metaDefault.replace('{{CAPTION}}', $cap)); 
    }); 
}); 

Несколько вещей неправильно с исходным кодом.

1. Событие change будет срабатывать только в том случае, если текстовое пространство размыто, а не нажатие клавиши. Я изменил это на
2. Я создал строку по умолчанию metaDefault с магической строкой {{CAPTION}}, так что .replace() знал бы, что заменить.
3. $cap должно быть .val()$(this).