Question

jquery如何实现点击按钮文本替换成输入框的内容？

<span class="tt">1111111111111111111111</span>

<div class="text">
<textarea name="textfield" id="textfield"> </textarea>
<input type="submit" name="button2" id="button2" value="提交" />
</div>

如上：
点击 提交 按钮
class为tt 里面 的内容替换成<textarea name="textfield" id="textfield"> </textarea> 文本框里面输入的内容

求高手帮我写出来。

Answer 1

如果将文本域的文本内容添加到span标签表示的区域中，可以使用如下代码

$("span").text($("textarea").val());

下面举个例子：

1. 创建Html元素：span标签用于点击按钮后复制文本的区域，文本域用于文本的输入

   <div class="top">
   	<span></span>
   	<textarea></textarea><br>
   	<input type="button" value="提交">
   </div>

2. 简单设置一下css样式

   div.top{width:500px;height:150px;margin:50px;}
   span{display: inline-block;width:330px;height:20px;padding:10px;margin:10px 0;border:2px dashed #ebbcbe;}
   textarea{width:350px;height:100px;padding:10px;border:1px solid green}
   input[type='button']{width:80px;height:30px;margin:10px 0;}

3. 编写jquery代码

   $(function(){
   	$("input[type='button']").click(function() {
   		$("span").text($("textarea").val());
   	});
   })

4. 观察显示效果
   

• 初始状态

  

• 输入文字

  

• 点击按钮

  

Answer 2

如下代码可以解决：

$(document).ready(function(){
			$("#button2").click(function(){
				$(".tt").html($("#textfield").val());
			});
		});

Answer 3

$("#button2").click(function(){$(".tt").html($("#extfield").val());return false;})