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

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>