如何解析“id =”标题“”中的数据到占位符?

时间:2017-04-19 18:49:29

标签: javascript jquery html

<input type="file" id="file" onchange="loadFile(this)" multiple> 
<p><b>Title:</b> <span id="title"></span></p>
</div>
<input type="text" placeholder="#title">

我希望将id=title的数据发送到placeholder,我可以用双引号(“”)代替什么才能获得该标题值?

3 个答案:

答案 0 :(得分:0)

我认为最简单的方法是(将id =&#34; textinput&#34;添加到输入类型):

<input type="file" id="file" onchange="loadFile(this)" multiple> 
<p><b>Title:</b> <span id="title"></span></p>
</div>
<input type="text" id="textinput" placeholder="#title">

<script>
document.getElementById("textinput").placeholder = document.getElementById("title").textContent;
</script>

答案 1 :(得分:0)

如果您要放置<span id="title"></span>中的文字并将其放入placeholder元素的input属性中,则需要改进HTML优先。

<强> HTML

<div>
  <input type="file" id="file-input" onchange="loadFile(this)" multiple /> 
  <p><b>Title:</b> <span id="title"></span></p>
</div>
<input type="text" placeholder="" id="title-input" />

然后你可以使用jQuery来完成任务。

<强>的JavaScript

$("#title-input").attr("placeholder", $("#title").text());

问题在于没有什么可以触发这一点。我怀疑loadFile()填充#title。所以你可能想看看它,看看你是否可以添加它。

或者,例如:

<强> HTML

<div>
  <input type="file" id="file-input" onchange="loadFile(this)" multiple /> 
  <p><b>Title:</b> <span id="title"></span></p>
</div>

<强>的JavaScript

$(function(){
  $("#title").click(function(){
    var currentValue = $(this).text();
    $(this).hide();
    var $textBox = $("<input>", {
      id: "edit-title",
      value: currentValue
    });
    var $saveLink = $("<a>", {
      href: "#"
    }).html("Save").click(function(e){
      e.preventDefault();
      $("#title").html($("#edit-title").val());
      $("#edit-title").remove();
      $(this).remove();
      $("#title").show();
    });
    $saveLink.insertAfter($("#title"));
    $textBox.insertAfter($("#title"));
  });
});

答案 2 :(得分:0)

首先修改你的html:

<p><b>Title:</b> <span id="title">SomeText</span></p>

<input type="text" placeholder="#title" id="txtBox">

如果您不想使用jQuery,请输入此javascript代码。

<script>
    var value = document.getElementById('title').textContent;
    document.getElementById('txtBox').setAttribute("placeholder", value);
</script>