如何让我的文本也转到下一个，然后放在我的按钮下？

Question

我希望第二个标签中的文本与<textarea>复制按钮在同一行开始，然后当我的文本到达复制按钮时，我希望我的文本转到下一行和下一行（以及之后的每一行）希望它完全在我的按钮之下。我希望我已经解释清楚了，谢谢您花时间阅读本文，我的代码如下。function myFunction(){    var text = document.getElementById('input').value;    var textArray = text.split(" ").sort();    var output= document.getElementById('output');    output.value = textArray.toString().replace(/,/g," ");} function maFunction() {    var copyText = document.getElementById("output");    copyText.select();    copyText.setSelectionRange(0, 99999)    document.execCommand("copy");}/*import React, { Component } from 'react';import { ToastContainer, toast } from 'react-toastify';import 'react-toastify/dist/ReactToastify.css';// minified version is also included// import 'react-toastify/dist/ReactToastify.min.css';class App extends Component {  notify = () => toast("Wow so easy !");  render(){    return (      <div>        <button onClick={this.notify}>Notify !</button>        <ToastContainer />      </div>    );  }}*//*import React, { Component } from 'react';import { toast } from 'react-toastify';class Example extends Component {  notify = () => {    toast("I cannot be duplicated !", {      toastId: 13    });  }  render(){    return (      <div>        <button onClick={this.notify}>Notify</button>      </div>    );  }}*/function fadeOut(){   location.href='index.html#open-modal';   setTimeout(function () {       location.href='index.html#modal-close';       }, 1000);}

Answer 1

如果我正确地得到了你想要的，我认为这是一个更好的实现，可以解决文本宽度和对齐问题，我使用网格CSS 和justify-items来对齐网格内的元素。

---

注意：我修改了 HTML 以确保 CSS 选择器有点通用

function myFunction(){

    var text = document.getElementById('input').value;

    var textArray = text.split(" ").sort();

    var output= document.getElementById('output');

    output.value = textArray.toString().replace(/,/g," ");

}

 function maFunction() {

    var copyText = document.getElementById("output");

    copyText.select();

    copyText.setSelectionRange(0, 99999)

    document.execCommand("copy");

}

/*

import React, { Component } from 'react';

import { ToastContainer, toast } from 'react-toastify';

import 'react-toastify/dist/ReactToastify.css';

// minified version is also included

// import 'react-toastify/dist/ReactToastify.min.css';

class App extends Component {

  notify = () => toast("Wow so easy !");

  render(){

    return (

      <div>

        <button onClick={this.notify}>Notify !</button>

        <ToastContainer />

      </div>

    );

  }

}

*/

/*import React, { Component } from 'react';

import { toast } from 'react-toastify';

class Example extends Component {

  notify = () => {

    toast("I cannot be duplicated !", {

      toastId: 13

    });

  }

  render(){

    return (

      <div>

        <button onClick={this.notify}>Notify</button>

      </div>

    );

  }

}*/

function fadeOut(){

   location.href='index.html#open-modal';

   setTimeout(function () {

       location.href='index.html#modal-close';

       }, 1000);

}

body {

    margin-top: 20px;

    margin-left: 20px;

    display: flex;

}

.form {

    display: grid;

    grid-template-columns: 50% 50%;

    column-gap: 10px;

    row-gap: 10px;

    margin-right: 20px;

    background: #ffffff;

    justify-items: end;

    postiion: relative;

    

}

.form textarea {

    border: none;

    margin-top: 15px;

    padding: 10px;

    height: 660px;

    width: 90%;

    outline: none;

    font-size: 24px;

    resize: none;

    border-style: solid;

    border-color: #4CAF50;

    border-width: 2px;

    outline: none;

    height: 700px;

    border-radius: 10px;

    margin-top: 0px;

}

.button {

    background: #4CAF50;

    border: none;

    outline: none;

    color: #ffffff;

    padding: 14px;

    width: 100px;

    border-radius: 0 10px;

    margin-top: 0px;

    margin-left: 0px;

    font-size: 22px;

    cursor: pointer;

    position: absolute;

    right: 50px;

}

::selection {

  color: black;

  background: lightblue;

}

.modal-window {

    position: fixed;

    background-color: rgba(200, 200, 200, 0.75);

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 999;

    opacity: 0;

    pointer-events: none;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    transition: all 0.3s;

}

.modal-window:target {

    opacity: 1;

    pointer-events: auto;

}

.modal-window > div {

    width: 170px;

    height: 50px;

    position: relative;

    /*margin: 10% auto;

    padding: 2rem;*/

    background: #444;

    color: #fff;

}

.modal-window h1 {

    margin-top: 15px;

    font-size: 10px;

}

<html>

<head>

    <title>alphabetical order machine</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>

    

    <form class="form">

        <input class="button" type='button' value="copy" onclick="maFunction(),fadeOut()">

        <textarea class="text"  id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea>

        

        <textarea class="alpha" id="output" readonly="readonly" type="output" placeholder="your alphabetized text will appear here"></textarea>

    </form>

<div id="open-modal" class="modal-window">

    <div>

        <h1>text copied to clipboard</h1>

        <div></div>

    <script src="index.js"></script>

</body>

</html>

更新：我在下面的代码片段中修复了您的代码的 UI，也在上面的代码片段中，我建议您使用上面的代码片段，因为它也具有响应性，但如果您想继续使用代码，这里有一个代码片段：

function myFunction(){

    var text = document.getElementById('input').value;

    var textArray = text.split(" ").sort();

    var output= document.getElementById('output');

    output.value = textArray.toString().replace(/,/g," ");

}

 function maFunction() {

    var copyText = document.getElementById("output");

    copyText.select();

    copyText.setSelectionRange(0, 99999)

    document.execCommand("copy");

}

/*

import React, { Component } from 'react';

import { ToastContainer, toast } from 'react-toastify';

import 'react-toastify/dist/ReactToastify.css';

// minified version is also included

// import 'react-toastify/dist/ReactToastify.min.css';

class App extends Component {

  notify = () => toast("Wow so easy !");

  render(){

    return (

      <div>

        <button onClick={this.notify}>Notify !</button>

        <ToastContainer />

      </div>

    );

  }

}

*/

/*import React, { Component } from 'react';

import { toast } from 'react-toastify';

class Example extends Component {

  notify = () => {

    toast("I cannot be duplicated !", {

      toastId: 13

    });

  }

  render(){

    return (

      <div>

        <button onClick={this.notify}>Notify</button>

      </div>

    );

  }

}*/

function fadeOut(){

   location.href='index.html#open-modal';

   setTimeout(function () {

       location.href='index.html#modal-close';

       }, 1000);

}

body {

    margin-top: 20px;

    margin-left: 20px;

    display: flex;

}

.txt {

    margin-right: 20px;

    background: #ffffff;

    border-style: solid;

    border-color: #4CAF50;

    border-width: 2px;

    outline: none;

    height: 700px;

    width: 45%;

    border-radius: 10px;

    /*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/

    margin-top: 0px;

}

.text {

    border: none;

    margin-top: 15px;

    margin-left: 18px;

    height: 660px;

    width: 630px;

    outline: none;

    font-size: 24px;

    resize: none;

}

.asci {

    background: #ffffff;

    border-style: solid;

    border-color: #4CAF50;

    outline: none;

    height: 700px;

    width: 45%;

    border-radius: 10px;

    /*box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/

    position: relative;

}

.alpha {

    margin-top: 15px;

    margin-left: 10px;

    height: 660px;

    width: 686px;

    outline: none;

    font-size: 24px;

    resize: none;

    vertical-align: top;

    border: none;

}

.button {

    background: #4CAF50;

    border: none;

    outline: none;

    color: #ffffff;

    padding: 14px;

    width: 100px;

    border-radius: 0 10px;

    margin-top: 0px;

    margin-left: 0px;

    font-size: 22px;

    cursor: pointer;

    position: absolute;

    right: 48px;

}

::selection {

  color: black;

  background: lightblue;

}

.modal-window {

    position: fixed;

    background-color: rgba(200, 200, 200, 0.75);

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 999;

    opacity: 0;

    pointer-events: none;

    -webkit-transition: all 0.3s;

    -moz-transition: all 0.3s;

    transition: all 0.3s;

}

.modal-window:target {

    opacity: 1;

    pointer-events: auto;

}

.modal-window > div {

    width: 170px;

    height: 50px;

    position: relative;

    /*margin: 10% auto;

    padding: 2rem;*/

    background: #444;

    color: #fff;

}

.modal-window h1 {

    margin-top: 15px;

    font-size: 10px;

}

<html>

<head>

    <title>alphabetical order machine</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>

    <form class="txt">

        <textarea class="text"  id="input" type="text" placeholder="type your text here" onchange="myFunction()" onkeyup="myFunction()"></textarea>        

    </form>

    <form class="asci">

        <textarea class="alpha" id="output" readonly="readonly" type="output" placeholder="your alphabetized text will appear here"></textarea>

        <input class="button" type='button' value="copy" onclick="maFunction(),fadeOut()">

    </form>

<div id="open-modal" class="modal-window">

    <div>

        <h1>text copied to clipboard</h1>

        <div></div>

    <script src="index.js"></script>

</body>

</html>