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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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> 文本框里面输入的内容

求高手帮我写出来。

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

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

下面举个例子:

    创建html元素:span标签用于点击按钮后复制文本的区域,文本域用于文本的输入

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

    简单设置一下css样式

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

    编写jquery代码

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

    观察显示效果

    初始状态

    输入文字

    点击按钮

参考技术A

如下代码可以解决:

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

本回答被提问者采纳
参考技术B $("#button2").click(function()$(".tt").html($("#extfield").val());return false;)

js实现点击内容到文本框再点击更换内容

各位大神,我想要一个类似于下拉框的单选效果,但是是横向的,也就是说有几个内容给点击,点击一个内容,文本框会显示相应内容,点击另一个内容,文本框会显示另一个内容,希望有完整代码

参考技术A 你可以参考下面的代码来进行:
<!DOCTYPE HTML>
<html>
<head>
<title>yugi</title>
<meta charset=UTF-8 />
<style type="text/css">
</style>
<script type="text/javascript">
var LInserter =

start : 0,
end : 0,
isIE : function ()

return (!!window.ActiveXObject);
,
getPos : function (obj, whichone)

var me = LInserter;
var pos = 0;
var dir = whichone == "start" ? "StartToStart" : "StartToEnd";
if (me.isIE ())

var rangeSelection = document.selection.createRange ();
if (rangeSelection.parentElement ().id == obj.id)

if (obj.tagName.toLowerCase () == 'textarea')

var rangeBody = document.body.createTextRange ();
rangeBody.moveToElementText (obj);

else

var rangeBody = obj.createTextRange ();

for (pos = 0; rangeBody.compareEndPoints (dir, rangeSelection) < 0; pos++)

rangeBody.moveStart ("character", 1);

for ( var i = 0; i <= pos; i++)

if (obj.value.charAt (i) == "\n")

pos++;


return (pos = whichone == "start" ? (me.start = pos) : (me.end = pos));


else

return (pos = whichone == "start" ? (me.start = obj.selectionStart) : (me.end = obj.selectionEnd));

,
insert : function (obj, params)

var me = LInserter;
obj.value = obj.value.substring (0, me.start) + params + obj.value.substr (me.start);
return obj.value;

;
</script>
</head>
<body>
<a href="javascript:;" onclick="LInserter.insert(document.getElementById('conet'), '我我我我我我我我');">点我</a>
<a href="javascript:;" onclick="LInserter.insert(document.getElementById('conet'), '他他他他他他他');">点他</a>
<textarea name="conet" id="conet" rows="14" cols="50" style="resize:none;" onmouseup="LInserter.getPos(this, 'start');"></textarea>
</body>
</html>

以上是关于jquery如何实现点击按钮文本替换成输入框的内容?的主要内容,如果未能解决你的问题,请参考以下文章

网页 使用js或jQuery实现 显示的文本变成输入框以供修改

我用jquery做登录界面时,点击登录按钮,怎样才能实现上面输入框的内容全部都合法,否则进不到下一个页面

如何调用本地js文件为网页文本框输入内容

jquery如何实现文本框输入内容超过长度不允许输入

如何手动触发点击输入框

jQuery如何根据输入到文本框的关键字查询页面内容、然后把相关的内容全部显示到list中、