个人中心
gpt4 book ai didi

javascript - 按钮在 iPhone 上的 Safari 中不起作用

转载 作者：行者123 更新时间：2023-11-28 15:19:43 29 4
gpt4 key购买 nike

我最近设计了一个网页，我不是网络开发人员，所以我从不同的地方收集了一些碎片，然后将它们缝合起来。

现在，该页面已完全设计并可在 firefox、chrome 和 IE 中运行。

但它不适用于 Safari。

代码如下:

<!DOCTYPE html>
<html lang="en-US">

<head>
<meta name="referrer" content="origin">
<script>
    var counter = 0;
    var limit = 50;

    function addInput(divName, arrName){
         if (counter == limit)  {
              alert("You have reached the limit of adding " + counter + " inputs");
         }
         else {
              var newdiv = document.createElement('div');
              newdiv.innerHTML = "<input type='text' name='" + arrName + "[]' required>";
              document.getElementById(divName).appendChild(newdiv);
              counter++;
         }
    }

</script>

<style>
    html *
    {
        color: #000 !important;
        font-family: Arial !important;
    }

 .wrapper
    {
      height: 100%;
      width: 100%;
      display: flex;
      overflow:auto;

    }

    .window
    {
      width: 100%;
      min-height: 200px;
      display: flex;
      flex-direction: column-reverse;
      float: none;
      align-items: center;
      justify-content: center;

    }

    .windowContent
    {

    }   

input[type=text], select {
    width: 150%;
    padding: 6px 10px;
    margin: 4px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 80%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
input[type=button]{
    width: 50%;
    background-color: #9CAFFF;
    color: white;
    padding: 6px 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 0px;
    float: left;
    width: 75%;
    margin: 5px;
    margin-left: 0.5cm;
}

.floating-box {
    float: left;
    width: 100%;
    margin: 5px;
    margin-left: 0.5cm;
    border: 3px solid #73AD21;  
}


</style>
</head>

<body onload="GenerateEmotion()">
<div class="wrapper">
    <div class="window">
        <div class="windowContent">
            <form method="POST" action="http://formspree.io/sga267@uky.edu" align="center">
                 <div id = "dynamicInputHolder">
                     <div id="dynamicInput_1">
                        Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
                            <div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
                     </div>
                     <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
                 </div>

                 <div id = "dynamicInputHolder">
                     <div id="dynamicInput_2">
                            <div class="floating-box">Sally heard a knock on the door.</div>
                     </div>
                     <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_2', 'myInputs_2');">
                 </div>

                 <div id = "dynamicInputHolder">
                     <div id="dynamicInput_3">
                            <div class="floating-box">Her heartbeat fast, Sally began to walk down the aisle.</div>
                     </div>
                     <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_3', 'myInputs_3');">
                 </div>

                 <br>
                 <input type="submit" value="I have completed a story">
            </form>
            <script>
                function GenerateEmotion(){
                    var emotion = "";
                    var raw = Math.random();
                    var final = Math.ceil(raw * 4);
                    if (final == 1)
                        document.getElementById("emotion").value = "Happy";
                    else if (final == 2)
                        document.getElementById("emotion").value = "Sad";
                    else if (final == 3)
                        document.getElementById("emotion").value = "Angry";
                    else if (final == 4)
                        document.getElementById("emotion").value = "Surprise";
                }
            </script>

        </div>
    </div>

    <div class="window">
        <div class="windowContent">
            <p><font size="6"><b>Emotionalize it!</b></font></p>
            <p><font size="3">We are trying to develop computer programs that can understand common emotions, so they can communicate better with human users.</font></p>
            <p><font size="5"><b> Rules of the game </b></font></p>


            <font size="3">
            <p>Imagine you are a narrator. Today, you are narrating a story of John and Sally's wedding.</p>
            <p>Your goal is to make your audience experience the emotion written on the left top. </p> 
            <p>We are helping you to maintain the flow, you just need to connect the dots!</p>
            <p>As your story will be fed to a giant computer program, so can you:</p>
            <ul>
              <li>Please use simple language. Do NOT use compound, complex, or conditional sentences</li>
              <li>Please do not use pronouns. Use the name - John instead of 'him'</li>
              <li>Please use the past tense and active voice.</li>
              <li>Please make sure to include events from the beginning to the end.</li>
              <li>You want more characters? If yes, Please use David(male) and Amy(female)</li>
              <li>You can use the also include character based actions, e.g. 'A waiter ...'</li>
              <li>Your audiance should experience the said emotion</li>
            </ul>
            </font>
        </div>
    </div>
</div>

</body>

</html>

具体来说，什么不起作用:

  1. 点击“添加新句子”按钮
  2. 提交

有没有错误:没有，点击按钮后没有任何反应

我在寻找什么:

  1. 如果您的 Web 开发人员能够弄清楚为什么它不能在 Safari 上运行，那将会很有帮助。
  2. 如何更改那部分，使功能保持不变，但它适用于 safari
  3. 由于我已经在问这个问题，另一个问题会有所帮助。我能知道如何修复底部的滚动条吗？

PS_1:如果您不想复制粘贴此代码，它处于工作状态 here

PS_2:当我说 safari 时，我指的是 iPhone 上的那个

最佳答案

尝试将“Emotion”输入文本框移到“dynamicInput_1”div 之外。所以，而不是:

        <form method="POST" action="http://formspree.io/sga267@uky.edu" align="center">
             <div id = "dynamicInputHolder">
                 <div id="dynamicInput_1">
                    Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
                        <div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
                 </div>
                 <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
             </div>

尝试:

        <form method="POST" action="http://formspree.io/sga267@uky.edu" align="center">
             <div id = "dynamicInputHolder">
            Emotion: <input type="text" value="" name="myInputs_1[]" id="emotion" disabled>
                 <div id="dynamicInput_1">
                        <div class="floating-box">Its John and Sally's wedding day! John and Sally are getting ready wedding ceremony will begin in an hour. Sally is little nervous.</div>
                 </div>
                 <input type="button" value="Add connecting sentences" onClick="addInput('dynamicInput_1', 'myInputs_1');">
             </div>

另外，看一下id和class的使用说明:div class vs id您有几个使用相同 ID 的 div。 ID 应该是唯一的。

我不确定你所说的将滚动条固定在底部是什么意思，所以我没有解决这个问题。

关于javascript - 按钮在 iPhone 上的 Safari 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46430001/

29 4 0
文章推荐： ios - 使用 AppAuth 和 Okta 时 iOS 上的身份验证问题
文章推荐： javascript - 变换旋转图像定位问题
文章推荐： swift - iCarousel 仅在调整大小后显示图像
文章推荐： html - 部分反复溢出
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com