如何使用jquery和textarea编辑隐藏的输入字段？

Question

我不确定我想要做的事情是否可行。好的，所以我已成功为我正在处理的网站创建了“放弃图片”功能。这就是它的外观（看起来会有所改善）。

现在，我有这个文本框，我可以编辑标题，但我正在努力使它，当我键入文本时，我能够编辑隐藏输入框的部分。例如，输入标题将编辑隐藏输入框内的标题部分。

它的外观如下：

<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

这是一个可能的解决方案。

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事件仅在textarea模糊时触发，而不是在击键时触发。我将其更改为keyup
2. 我创建了一个默认字符串metaDefault，其字符串为{{CAPTION}}，因此.replace()会知道要替换的内容。
3. $cap必须是.val()的{​​{1}}。

Answer 2

首先将您的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 3

这样改变怎么样？

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

});