как мне получить следующий текст go и затем под моей кнопкой? - PullRequest
Новая
       0

как мне получить следующий текст go и затем под моей кнопкой?

2 голосов
/ 18 апреля 2020

Я хочу, чтобы текст во втором теге <textarea> начинался с той же строки, что и кнопка копирования, а затем, когда мой текст достигает кнопки копирования, я хочу, чтобы мой текст был go на следующей строке и на следующей строка (и каждая строка после этого) хотят, чтобы она была go полностью под моей кнопкой. Я надеюсь, что объяснил это хорошо, спасибо, что нашли время, чтобы прочитать это, мой код ниже. 

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);*/
}

.alpha {
    margin-top: 15px;
    margin-left: 10px;
    height: 660px;
    width: 550px;
    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;
}

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

1 Ответ

1 голос
/ 18 апреля 2020

Если бы я получил то, что вы хотите правильно, я думаю, что это лучшая реализация и будет решать ширину и выравнивание текста, я использовал grid CSS и justify-items для выровнять элементы внутри сетки.

ПРИМЕЧАНИЕ : я обновил HTML, чтобы убедиться, что CSS селекторы немного обобщены c

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>

ОБНОВЛЕНИЕ : я исправил пользовательский интерфейс для вашего кода в следующем фрагменте, также в приведенном выше фрагменте, Я предлагаю вам использовать приведенную выше, так как она тоже отзывчива, но если вы хотите продолжать использовать свой код, вот фрагмент: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...