文字搬运工

<!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>

效果:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用border实现三角形的过程

    从上图很容易看出,当box宽度降低到很小,也就是border的梯形的上边降到很小。所以想一想,当这一值降到0时,border就变成了三角形。如下图:

    IT人一直在路上
  • 三种图表技术SVG、Canvas、WebGL 3D比较

    因为前两项都是描述2D图形的,而WebGL是描述3d的,所以以下针对SVG和Canvas做比较。

    IT人一直在路上
  • Day3

    3.dict.setdefault(“stu005”,"liu")函数的作用,先检测字典中是否有key为“stu005”

    IT人一直在路上
  • js验证码倒计时

    IT故事会
  • BUTTONS V. 2.0.0——CSS按钮库

    参考资料 BUTTONSV. 2.0.0 Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。

    小蔚
  • 使用jatoolsPrinter实现套打

    最近在工作中遇到了套打的需求,前前后后,花了不少时间,现在总结一下套打的实现方式。

    week
  • [Qt]QLabel的显示圆形

    原文链接:https://blog.csdn.net/humanking7/article/details/88065087

    祥知道
  • CSS魔法堂:说说Float那个被埋没的志向

    前言  定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了;2. 它跟Norma...

    ^_^肥仔John
  • 前端开发,CSS3动画代码高频知识点

    如上面的例子可知animation-name是可以任意名称。这个名称用关键帧来定义

    用户5997198
  • dubbo路由层代码简介

    yiduwangkai

扫码关注云+社区

领取腾讯云代金券