我希望第二個標(biāo)簽中的文本與<textarea>復(fù)制按鈕在同一行開始，然后當(dāng)我的文本到達(dá)復(fù)制按鈕時，我希望我的文本轉(zhuǎn)到下一行和下一行（以及之后的每一行）希望它完全在我的按鈕之下。我希望我已經(jīng)解釋清楚了，謝謝您花時間閱讀本文，我的代碼如下。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);}
1 回答
FFIVE
TA貢獻(xiàn)1797條經(jīng)驗 獲得超6個贊
如果我正確地得到了你想要的，我認(rèn)為這是一個更好的實現(xiàn)，可以解決文本寬度和對齊問題，我使用網(wǎng)格CSS 和justify-items來對齊網(wǎng)格內(nèi)的元素。
注意：我修改了 HTML 以確保 CSS 選擇器有點(diǎn)通用
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>
更新：我在下面的代碼片段中修復(fù)了您的代碼的 UI，也在上面的代碼片段中，我建議您使用上面的代碼片段，因為它也具有響應(yīng)性，但如果您想繼續(xù)使用代碼，這里有一個代碼片段：
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>
- 1 回答
- 0 關(guān)注
- 130 瀏覽
添加回答
舉報
0/150
提交
取消