Jquery将div中的文本移动到表单输入字段

有人可以看看这个

http://jsfiddle.net/bloodygeese/EzkFR/1/

我的目的是点击“点击我”获取“区域”div中包含的文本，以移动到下面的文本区域 – 每个空间一个。

我删除了我失败的jquery尝试代码，因为我真的不知道我在做什么。

如果我可以让这个工作下一步将尝试实现相同的事情当“显示区域在不同的页面上？不确定是否可能，我希望它是？

Answer 1

不确定是否要留下原始文本

演示： http ： //jsfiddle.net/EzkFR/6/

$('#submit').click(function(){ $('#displayarea').val( $('#area').text() ); $('#displayarea2').val( $('#area2').text() ); }) 

请注意，没有input type="textarea" 。 它是input type="text"或

如果您希望原始文本容器消失，请使用remove()

Answer 2

试试这段代码：

 ​$("#submit").click ( function() { $("#displayarea").val($("#area").text()); $("#displayarea2").val($("#area2").text()); $("#area").html(""); $("#area2").html(""); } );​​​​​​​ 

编辑：使用.text而不是.html因为我们不希望INPUT字段中有任何标记。

Answer 3

 var $texts = $('textarea'); var $divs = $('div'); $('#submit').click(function() { $divs.each(function(index) { $texts.get(index).value = this.innerHTML; $(this).remove(); }); });​ 

修复了DEMO

笔记：

• textarea，不是你写的类型，它是一个标签：
• 我缓存了元素，所以我不需要多次查询DOM。

Answer 4

假设你想要一种可扩展的方法来做到这一点……

 
I wish I could go down there
 
Me too please!!
     
click me
 ​ $('div#submit').click(function(e) { $('input.inputtable').each(function() { var input = $(this); $('div.movable').each(function() { var self = $(this); if (!self.hasClass('moved') && !input.hasClass('inputted')) { input.val(self.text()).addClass('inputted'); self.addClass('moved'); } }); $('div.movable.moved').detach(); //safe to remove now that we're not looping through them. }); e.preventDefault(); return false; });​ 

工作小提琴： http ： //jsfiddle.net/EzkFR/10/