iphone 上的 safari 中按钮不起作用

Question

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

现在，该页面已完全设计并可在 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>

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

按钮点击 'add new sentences'
提交

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

我在寻找什么：

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

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

PS_2：当我说 safari 时，我指的是 iPhone

上的那个

Answer 1

您是否在 Safari 中打开了 javascript？

桌面：https://support.ezimerchant.com/hc/en-us/articles/200836150-How-do-I-enable-cookies-and-JavaScript-in-Safari-Mac-

手机：https://www.whatismybrowser.com/guides/how-to-enable-javascript/safari-iphone-ipod

Answer 2

尝试将 "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 您有多个 div 使用相同的 ID。 ID 应该是唯一的。

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

iphone 上的 safari 中按钮不起作用

buttons dont work in safari on iphone

html

javascript

css

safari

cross-browser