javascript - 如何将用户以输入类型编写的文本显示到 iframe 中？

Question

我正在为我的大学元素创建一个 T 恤设计网站。我想在我已将 T 恤设置为背景图像的 iframe 中的“输入类型文本”中显示用户编写的文本。我搜索互联网但无法获得任何可行的解决方案..

我希望文字出现在 T 恤的胸部上方。

感谢任何帮助..

body{
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding: 0px;
    overflow-x: hidden;
    font-family: sans-serif; 
}
header{                                                       
    padding: 8px;
    height:155px;
    color: white;
    background-color:#6495ED;
    clear: left;
    width:100%;
 }
footer
{   padding: 4px;
    color: white;
    background-color:#6495ED;
    width:100%;
    text-align:center;
    font-size:20px;
    font-family:Arial;
}

ul {                                                                               
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width:100%;
}

li {
    float: left;
}

li a,.dropbtn {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial;
    font-size: 20px;

}

li a:hover:not(.active), .dropdown:hover .dropbtn {
    background-color: #111;
}
li a.active {
    background-color: royalblue;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: royalblue;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

h2.tagline
{
text-align:center;
font-size:35px;
font-style:italic;
font-family: "Florence", cursive;
margin-top:-100px;
margin-left:-80px;
}

iframe {
width: 700px;
height: 700px;
margin: -590px 90px 20px 650px;
display: inline-block;
position: relative;
border:none;
}

.designcontainer {
display: inline-block;
}

.colorbutton {
    background-color: #4CAF50; /* Green */
    border: none;
    color: black;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 14px;
    transition-duration: 0.4s;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}


.colorbutton:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.buttonw {background-color: white; color:black;} /* White */
.buttonb {background-color: blue; color:white;} /* Blue */
.buttonr {background-color: #f44336; color:white;} /* Red */ 
.buttony {background-color: yellow; } /* Yellow */




@keyframes click-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 5.33333px;
  right: 0;
  bottom:0;
  left: 0;
  height: 25px;
  width: 25px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
  line-height: 50px;
}
.option-input:hover {
  background: #9faab7;
}
.option-input:checked {
  background: royalblue;
}
.option-input:checked::before {
  height: 15px;
  width: 15px;
  position: absolute;
  content: '\2714';
  display: inline-block;
  font-size: 26.66667px;
  text-align: center;
  line-height: 28px;
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: royalblue;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
}
.option-input.radio {
  border-radius: 50%;
}
.option-input.radio::after {
  border-radius: 50%;
}
.labelname
{
    font-size: 20px;

}

span {
    position: relative;
    display: inline-block;
    margin: 30px 10px;
  }
.gate {
  display: inline-block;
  width: 500px;
  height: 100px;
  padding: 10px 0 10px 15px;
  font-family: "Open Sans", sans;
  font-weight: 400;
  color: royalblue;
  background: #c6c6c6;
  border: 0;
  border-radius: 10px;
  outline: 0;
  text-indent: 65px;
  transition: all .3s ease-in-out;
  
}
.gate::-webkit-input-placeholder {
  color: #c6c6c6;
  text-indent: 0;
  font-weight: 300;
    font-size:18px;
}
.gate + label {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 15px;
  text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
  background: royalblue;
  transition: all .4s ease-in-out;
  border-radius:5px;
  transform-origin: left bottom;
  z-index: 99;
    color:white;
    size:18px;
}
.gate + label:before, .gate + label:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 10px;
  background: royalblue;
  transform-origin: left bottom;
  transition: all .4s ease-in-out;
  pointer-events: none;
  z-index: -1;
  font-size:18px;
}
.gate + label:before {
  background: rgba(3, 36, 41, 0.2);
  z-index: -2;
  right: 20%;
    font-size:18px;
}

span:nth-child(2) .gate {
  text-indent: 85px;
}

span:nth-child(2) .gate:focus,
span:nth-child(2) .gate:active {
  text-indent: 0;
}

.gate:focus,
.gate:active {
  color: ;
  text-indent: 0;
  background:#c6c6c6;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.gate:focus::-webkit-input-placeholder,
.gate:active::-webkit-input-placeholder {
  color: floralwhite;
}
.gate:focus + label,
.gate:active + label {
  transform: rotate(-66deg);
  border-radius: 3px;
}
.gate:focus + label:before,
.gate:active + label:before {
  transform: rotate(10deg);
}

<!DOCTYPE html>
<html>
<head>
<title>
T-shirtinator-PERSONALIZE
</title>
<LINK REL="icon" HREF="image/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/pshirts.css">  
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<header>
<br>
<img src="image/logo.png" >
<h2 class=tagline>"The T-shirt you design <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
at your doorstep"</h2>

 </header>

<ul>
  <li><a href="homepage.php">Home</a></li>
  <li><a class="active" href="#ptshirts">Personalized T-shirts</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Buy From Us</a>
    <div class="dropdown-content">
      <a href="#">Quotes printed T-shirts</a>
      <a href="#">Graphic printed T-shirts</a>
      <a href="#">Memes printed T-shirts</a>
    </div>
  </li>
  <li><a href="help.php">Help</a></li>

 <li><a href="contactus.php">Contact Us</a></li>

 <li onclick="document.getElementById('id02').style.display='block'"style="float:right"><a href="#">Sign Up</a></li>
 <li onclick="document.getElementById('id01').style.display='block'" style="float:right"><a href="#">Login</a></li>
</ul>

    <div class="designcontainer">
    <h1>Select Colour</h1>

        <a href="iframetshirtwhite.html" target="myiframe"><button class="colorbutton buttonw">White</button></a> &nbsp;&nbsp;
<a href="iframetshirtred.html" target="myiframe"><button class="colorbutton buttonr">Red</button></a> &nbsp;&nbsp;
<a href="iframetshirtblue.html" target="myiframe"><button class="colorbutton buttonb">Blue</button></a> &nbsp;&nbsp;
    <a href="iframetshirtyellow.html" target="myiframe"><button class="colorbutton buttony">Yellow</button></a> &nbsp;&nbsp;
    
    <h1>Select Size</h1>
    <form action="include/storeinfo.inc.php" method="post">
    
        <div>
  <label class="labelname">
    <input type="radio" class="option-input radio" name="size" value="small" checked />
    Small(S)
  </label>
  <label class="labelname">
    <input type="radio" class="option-input radio" name="size" value="medium" />
    Medium(M)
  </label>
  <label class="labelname">
    <input type="radio" class="option-input radio" name="size" value="large"/>
    Large(L)
  </label>
</div>
        
        <h1>Enter the Text you want on your T-shirt</h1>
        <span>
        <input type="text" name="text" class="gate" id="enter" placeholder="Max 10 letters.." maxlength="10" />
       <label for="enter">Enter</label>
        </span>
    
        <br>
        
        <input type="submit" class="colorbutton" value="Proceed" name="submit" style="margin-top:20px; margin-left:100px;">
        
        <input type="submit" class="colorbutton" value="Preview" name="submit1" style="margin-top:20px; margin-left:50px;">
        
        </form>
    

<iframe name="myiframe" src="iframetshirtwhite.html"></iframe>

</div>
    <footer >
Copyright &copy;  2017 www.DAJ.com
</footer>
</body>




</html>

iframe 的 html 文件:

<html>
<head>
<style>
body
{
overflow-y: hidden;
overflow-x: hidden;
background: url(image/white.jpg);
background-size: 690px 690px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>

  

Answer 1

除非您有充分的理由这样做，否则不要使用 and 。似乎不必要且令人费解。

从 <input> 中获取值非常简单或 <textarea>使用 JavaScript 并将其放在另一个元素中，例如 <div> .这是一个 super 基本示例，可以生成一个实际示例(假设绿色 DIV 是一张 T 恤的照片)。

var $text = $( '.tshirt-text' );
var $demoText = $( '.demo-tshirt-text' );

$text.on( 'keyup', function ( e ) {
  $demoText.text( $text.val() );
} );

.demo-tshirt {
  position: relative;
  width: 300px;
  height: 400px;
  background-color: seagreen;
}

.demo-tshirt-text {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 50%;
  transform: translateX( -50%);
  color: white;
  font-family: Arial, sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="tshirt-text">
  Text: <input type="text" id="tshirt-text" class="tshirt-text" name="tshirt-text">
</label>
<div class="demo-tshirt">
  <div class="demo-tshirt-text"></div>
</div>