Question

我试图将一些文本从可编辑的div传递给不可编辑的div，onclick。这是结果：

HTML：

<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button>
<div id='casella'></div>

CSS：

#faketxt {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}

#casella{
width: 150px;
height: 300px;
font-size: 8px;
border-style: solid;
}

JQUERY：

$("body").on("click", "#btn", function(){
    var primo = document.getElementById(faketxt);
var secondo = document.getElementById(casella);
secondo.val(primo).text();
})

我怎样才能以正确的方式做到这一点？我必须传递文本的元素必须严格地为div，我无法弄明白。

Answer 1

如果您使用的是javascript，解决方法是应用textContent方法。

textContent属性设置或返回指定节点及其所有后代的文本内容。

$("body").on("click", "#btn", function(){
    var primo = document.getElementById('faketxt');
    var secondo = document.getElementById('casella');
    secondo.textContent=primo.textContent;
});

这是使用jquery .text()函数的解决方案。

$("body").on("click", "#btn", function(){
    var primo = $('#faketxt');
    var secondo = $('#casella');
    secondo.text(primo.text());
});

＆＃13;

$("body").on("click", "#btn", function(){
    var primo = document.getElementById('faketxt');
    var secondo = document.getElementById('casella');
    secondo.textContent =primo.textContent;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button>
<div id='casella'></div>

＆＃13;

working fiddle

Answer 2

当你有JQuery时，为什么要混用JavaScript？

$("body").on("click", "#btn", function(){
     var primo = $("#faketxt");
     var secondo = $("#casella");
     secondo.text(primo.text());
})

Fiddle here

Answer 3

由于您正在使用jQuery，请使用jQuery：请注意，val（）仅适用于表单元素。请注意，我在此处使用html()函数，因为contenteditable允许将HTML元素混合到文本中。

＆＃13;

$("body").on("click", "#btn", function() {
  $('#casella').html($('#faketxt').html());
});

＆＃13;

#faketxt {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
}
#casella {
  width: 150px;
  height: 300px;
  font-size: 8px;
  border-style: solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faketxt" contenteditable>Write Here</div>
<button id='btn'>OK</button>
<div id='casella'></div>

＆＃13;

Answer 4

您应该使用jQuery的text()方法。

我为你创建了a codepen。等效的jsfiddle就在这个答案的最后。

也是一般的提示。仅使用单引号或双引号。你在html中混合使用单引号和双引号。

＆＃13;

$(document).ready(function() {
   $('body').on('click', '#btn', function() {
    var fakeText = $('#faketxt');
    var casellaElement = $('#casella');
    casellaElement.text(fakeText.text());
  })
});

＆＃13;

#faketxt {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
}

#casella {
  width: 150px;
  height: 300px;
  font-size: 8px;
  border-style: solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faketxt" contenteditable>Write Here</div>
<button id="btn">OK</button>
<div id="casella"></div>

＆＃13;

如何将文本从div传递到另一个div

4 个答案: