我有一个包含电子邮件输入的表单。

<form action="." method="post">
    <div id="email-wrapper">
        <input type="text" placeholder="Your email" name="email" ref="email" onChange={this.handleChange}/>
    </div>
    <span class="signup-error">Please provide a valid email.</span>
</form>
....
....
<button id="next-btn" onClick={this.saveAndContinue}>Next</button>

当按下按钮时，我使用简单的正则表达式进行验证以确认它是一个电子邮件地址，这工作正常。但是，如果我按 Enter ( key=13)，它会定向到另一个页面，这是我看到的错误：

无法发布 /

我以为这个脚本可以解决这个问题，但它没有：

handleChange = (event) => {
    event.preventDefault();
    var keyCode = event.keyCode || event.which;
    if (keyCode == '13'){
        console.log('enter pressed');
    }
}

这是怎么回事？如何防止在输入字段中按 Enter 键时发生重定向？请你帮助我好吗。谢谢你。

背景

我正在构建一个日期范围选择器，它使用两个 HTMLtype="date"输入元素：

如果用户选择与之前选择的日期不同的日期，我可以使用该事件检测日期选择器何时关闭change。但是，如果用户选择相同的日期，则输入值不会更改，并且 Firefox 不会触发该change事件或该input事件。

示例代码

var dateInput = document.querySelector('[name="dateBegin"]');
var debugEl = document.querySelector('#debug');

dateInput.addEventListener('click', function(event){
  debugEl.innerHTML += '<br>Event fired: click';    
});

dateInput.addEventListener('input', function(event){
  debugEl.innerHTML += '<br>Event fired: input'; 
});

dateInput.addEventListener('change', function(event){
  debugEl.innerHTML += '<br>Event fired: change'; 
});

<input type="date" name="dateBegin">
<div id="debug"></div>

问题

有没有办法检测 HTML 日期选择器何时由于用户交互而关闭，即使输入的值没有改变？

这个问题改进了 r/reactjs 上的一个问题。

我有一个控件input，我可以通过编程方式更改其值。我想使用它.setSelectionRange()来保持输入中的插入符位置。

但这不起作用：默认情况下，每次重新渲染都会自动将选择范围设置为输入的末尾。

此沙箱中说明了该问题，原始问题的作者以 10 毫秒的setTimeout()延迟修复了该问题。

如何在不使用与 Hooks 不兼容的setTimeout()or 的情况下实现此目的？getSnapshotBeforeUpdate()

我刚刚发现一个流浪者event.preventDefault()正在破坏我的复选框处理onChange程序：

import { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      accepted: false
    }
  }

  changeChecked = (event) => {
    this.setState((state) => ({
      accepted : !state.accepted
    }));
    event.preventDefault(); // <- this very bad
  }

  render() {
    return (
      <input
        type="checkbox" 
        onChange={this.changeChecked}
        checked={this.state.accepted}
      />
    );
  }
}

export default App;

第一次单击时产生的行为是正确更新的状态，但复选框仅在下一次重新渲染时更改为其“选中”外观，例如。第二次点击。

这是为什么？受控组件独立于浏览器事件工作不是重点吗？

有人向我解释这一点肯定会减轻我花费数小时来简化复杂用例的痛苦。谢谢你！

更新：这是一个快速的Codepen 示例，演示了奇怪的行为。我添加了一个“未阻止的复选框”和一个包含已阻止onClick事件的复选框作为比较。onChange请注意，当我单击另一个复选框时，带有阻止的复选框如何将其外观切换为实际状态。

我有这个大数据输入类页面,一种使用div的表格布局.每行都有可以切换打开/关闭的子行.使用css可见性设置触发切换.表格的每个"单元格"在其角落都有一个小图像,您单击图像,然后会打开一个弹出窗口,允许您在条目上添加注释.

这个弹出窗口有一个文本区域和一组复选框,以及一个按钮(输入类型=提交,我认为).弹出窗口是嵌套在隐藏div中的iframe.

在IE7中,一旦你弹出这个注释iframe并向下滚动页面,将鼠标悬停在弹出窗口的textarea上会使它消失并显示它下面的页面内容.鼠标悬停时,复选框也会显示以下页面.

所以,我尝试了一些不同的修复方法.Z-index是我希望可以用来解决这个问题的方法.没有这样的运气.我可能会尝试使用普通输入类型=文本替换文本区域,但由于复选框也出现此错误,我怀疑单行文本输入也会导致错误.

当我在CSS中使用text-ident属性时,我期望看到的是当您将焦点放在文本输入区域时,文本光标图标/插入符号将显示为缩进.但看起来好像它没有缩进,直到你键入第一个字符.唯一的解决方法是在输入元素上使用左边距,但我想避免使用填充,因为我也设置了宽度,并且不希望使用IE特定的电子表格来实现IE的填充修复.

这个错误发生在Safari中.

请参阅下面的图片,了解我在说什么.

在没有文本时进行焦点,text-ident不会影响插入位置:

当您开始输入时,它会正确缩进:

键入然后删除键入的内容后,它会显示我想要从头开始执行的操作(缩进插入符号).

HTML:

<input type="text" />

CSS:

input   { text-indent: 10px; }

iPad默认为今天input type="date"获得焦点时(由于下一个/上一个按钮和我使用蓝牙键盘设置tab/shift-tab),例如在iPad上使用http://jsbin.com/etovur/1进行测试.

问:是否有一种可在iPad和iPhone工程,使之日起的解决方法不是默认时到今日刚刚通过现场导航？

这是编辑现有数据时的UI问题,并使用next/previous来浏览字段,因为它将空白更改为今天,例如员工的终止日期字段设置为今天,并且员工被解雇.

我们只需要一个适用于iPad/iPhone的解决方案,并注意input type=date两个设备之间的实现有显着差异.桌面浏览器并不重要,因为我们使用非本机日期控件(正是为了避免日期控件的工作和外观变化问题,或者是否提供它们).这个问题至少发生在iOS5的iPad和iOS6的iPhone上.

HTML5有一个名为"number"的新输入类型.在大多数移动智能手机上,这会打开一个数字键盘.在pre-html5手机上,类型会回归到"文本",我们没问题.然而,在某些型号上,数字小键盘没有句号,也无法单击"符号"按钮添加句号.具有此缺陷的已知型号是:

• 三星Galaxy S4,请参阅:三星Galaxy S4数字键盘缺失期
• 三星Galaxy Note II
• 三星Galaxy Tab 2 10".请参阅:三星Galaxy平板电脑不允许将"浮点数"输入"数字"类型的输入
• ????

还有什么型号？较旧的三星Android 2.2手机没有这个问题.其他Android设备,如Nabi Tab没有这个问题.我看过Galaxy S3没有这个问题.

见相关讨论:

• 在Firefox中输入<input type ="number">.为什么Mozilla不支持其浏览器中的数字输入？
• HTML5 - 输入=数字和不兼容的浏览器
• HTML5输入类型编号与电话号码

此外,没有注意到那些输入类型="tel "适用于iPad,但不能作为iPhone上数字的替代品.因此,webapp必须确定设备模型,否则请求输入type ="text ".

什么手机和平板电脑型号错误地解释input type="number"为整体非十进制输入键盘？

<input type="file" capture="camera" accept="image/*">允许移动浏览器拍照。在 Android 原生浏览器和 chrome 上，单击输入按钮可立即启动相机。在 iOS Safari 上，该按钮会发出警报，要求“拍照”或从“照片库”中进行选择。如何立即启动本机相机？

我一直在关注Angular2教程https://angular.io/docs/ts/latest/tutorial/toh-pt6.html并找到以下输入元素语法(在"Add a Hero"标题下):

<input #heroName />

这应该是设置元素的id属性input,但我在HTML5规范(https://www.w3.org/TR/html5/syntax.html#attributes-0)中找不到这种语法.

有谁能解释这种语法？