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

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

转载作者：行者123 更新时间：2023-11-28 15:19:43

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

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

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

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

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

我在寻找什么:

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

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/

文章推荐： ios - 使用 AppAuth 和 Okta 时 iOS 上的身份验证问题

文章推荐： javascript - 变换旋转图像定位问题

文章推荐： swift - iCarousel 仅在调整大小后显示图像

文章推荐： html - 部分反复溢出

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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