Question

我尝试使用oninput事件对24小时格式输入类型时间（允许的最小和最大时间，仅00和30分钟）应用某些控件。使用Firefox非常棒，因为它只在小时和分钟的2位数字结束后应用控件，但在Chrome中，当我放入第一个数字时，事件就会被触发，所以我无法插入任何内容，因为如果我想要插入15，它开始控制1。其他人有类似的经历或知道如何做类似的控制？以下是我正在使用的功能。感谢

function timectrl() {
    var mytime = document.getElementById("ora").value;
    var sommaora = new Date();
    var initialtime = "<?= $_POST['oraini'] ?>";
    var finaltime = "<?= $_POST['orafine'] ?>";

    mytime = mytime.split(":");
    initialtime = orini.split(":");
    finaltime = orfine.split(":");

    sommaora.setHours(mytime[0],mytime[1]);
    if ((mytime[1]>00) && (mytime[1]<=15))  
    {
      document.getElementById("ora").value=sommaora.getHours()+":00";
    }
    else if ((mytime[1]>15) && (mytime[1]<=30))  
    {
      document.getElementById("ora").value=sommaora.getHours()+":30";
    }
    else if ((mytime[1]>30) && (mytime[1]<=45))  
    {
      document.getElementById("ora").value=sommaora.getHours()+":30";
    }
    else if ((mytime[1]>45) && (mytime[1]<=60))  
    {
      document.getElementById("ora").value=sommaora.getHours()+":00";
    }

    if (mytime[0]<initialtime[0])  
    {
       document.getElementById("ora").value=initialtime[0]+":"+initialtime[1];
    }
    if (mytime[0]>finaltime[0])  
    {
      document.getElementById("ora").value=finaltime[0]+":"+finaltime[1];
    }


 }

Answer 1

您可以替换逻辑的开头：

import styled from 'styled-components';

import Col from '../../../common-util/col';
import Grid from '../../../common-util/grid';
import H4 from '../../../common-util/headers/h4';
import H5 from '../../../common-util/headers/h5';

export const Container = styled(Grid)`
    padding-bottom: 20px;
`;

export const Content = styled.div`
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
`;

export const Title = styled.h1`
    font-size: 42px;
    line-height: 1.0;
    letter-spacing: -0.3px;
    text-align: justify;
    font-weight: 500;
`;

export const Image = styled.img`
    width: 100%;
`;

export const Statement = styled.p`
    padding: 15px 20px;
    background: url(/static/images/svg/top-left-bg.svg) top left no-repeat, url(/static/images/svg/bottom-right-bg.svg) bottom right no-repeat;
    background-size: 20px;
    line-height: 2.3;
    letter-spacing: -0.2px;
    font-size: 16px;
    margin: 0
`;

export const Heading = H4.extend`
    color: #4990e2;
    text-align: left;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 5px;
    margin-left: 20px;
`;

export const Designation = H5.extend`
    text-align: left;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.2px;
    margin-top: 0;
    margin-left: 20px;
`;

export const Arrow = styled.div`
    margin: auto;
    color: grey;
    font-size: 20px;
    font-weight:lighter;
    cursor: pointer;
    &:hover {
        font-size: 22px;
    }

    &.disabled {
        pointer-events: none;
        &:hover {
            font-size: 20px;
        }
    }
`;

export const StyledCol = Col.extend`
    margin: auto;
`;

不确定这是否是你要问的但是小提琴会有所帮助

Answer 2

在html5中，<input type="time">元素具有属性step，该属性应完全完成本文所讨论的内容。步骤以秒为单位输入，因此30分钟为1800秒。不幸的是，实际上没有多少浏览器执行此属性指定的输入舍入。以下“ polyfill”解决了这一缺点：每当进行输入时，该元素的值都会四舍五入到满足step属性的最近时间值。在我的示例中，我将操作绑定到元素的input事件：

$('input[type=time]').change(ev=>{var e=ev.target;
 if(e.step){
  var ti=e.value.split(':'),st=e.step/60,
  mi=Math.round(ti[1]/st)*st,
  ho=(ti[0]-0)+Math.floor(mi/60);
  mi=mi%60;ho=ho%24;
  e.value=('0'+ho).substr(-2)+':'+('0'+mi).substr(-2);
}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="time">
 <label>15 min. steps:
 <input type="time" name="start" step="900"></label><br>
 <label>30 min. steps:</label>
 <input type="time" name="end" step="1800">
</form>

输入类型时间内oninput事件的不同浏览器的不同行为

2 个答案: