文字搬运工

最新推荐文章于 2021-05-23 10:00:23 发布

a5199421

最新推荐文章于 2021-05-23 10:00:23 发布

阅读量116

点赞数

原文链接：http://www.cnblogs.com/liutianzeng/p/10021512.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字搬运工</title>
    <style>
        .nav{border: 5px blue solid;float: left}
        .left{float:left;margin:30px;border:3px red solid;width: 300px;height: 200px;}
        .right{float: left;margin: 30px;border:3px black solid;width:300px;height: 200px;}
        button{position:relative;top: 30px;float: left;}
    </style>
</head>
<body>
<div class="nav">
   <textarea class="left"></textarea>
    <button>文字右移</button>
    <textarea class="right"></textarea>
</div>
<script>
    window.onload=function () {
        var textLeft=document.getElementsByClassName("left")[0];
        var textRight=document.getElementsByClassName("right")[0];
        var button=document.getElementsByTagName("button")[0];
        button.onclick=function () {
            textRight.value+=textLeft.value;
            textLeft.value="";
        }
    }
</script>
</body>
</html>

效果：

注释：左框输入，点击按钮，文字转移到右框

转载于:https://www.cnblogs.com/liutianzeng/p/10021512.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

a5199421

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字搬运工

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字搬运工</title> <style> .nav{border: 5px blue solid;float...
复制链接

扫一扫