最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】ReactJS中如何禁止input控件获得输入的焦点以避免弹出键盘和输入

ReactJS crifan 7068浏览 0评论

折腾:

【部分解决】ReactJS中react-mobile-datepicker中input被设置readonly时无法滚动选择日期

期间,

通过input的readonly会导致日期选择器无法滑动选择日期

所以只能想办法去:

禁止input的获取focus

去防止出现键盘,不允许输入

react js input prevent focus

react js prevent  input get focus

javascript – Is it possible to remove the focus from a text input when a page loads? – Stack Overflow

这个是jquery的,不是普通的的html和js

但是需要抽空去搞懂blur是啥,能起到什么效果

javascript – React.js – input losing focus when rerendering – Stack Overflow

注:

此处input已经是不允许选择了:

  //disable text selection
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

Inputs lose focus on parent re-render · Issue #51 · gcanti/tcomb-form

How to put focus at the end of an input with React.js (Example)

javascript – Prevent click-Event on input field – Stack Overflow

之前已经试过了:

  constructor(props) {
    this.handleDateClick            = this.handleDateClick.bind(this);
}
  handleDateClick(e) {
    e.preventDefault();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
}
      <input
        value={datetimeToStr(this.state.curDate, "请选择")}
        onClick={this.handleDateClick}

e.preventDefault();

没效果。

javascript – AutoFocus an input element in react JS – Stack Overflow

react js prevent  input   focus

react js prevent  input  preventDefault not work

reactjs – React onClick and preventDefault() link refresh/redirect? – Stack Overflow

试试在:

handleDateClick

最后返回false试试

javascript – event prevent default in ReactJS when passing events to parent – Stack Overflow

No way to prevent default browser input validation · Issue #89 · christianalfoni/formsy-react

React & event.preventDefault() – Eric Clemmons – Medium

【总结】

最后还是之前的代码:

  handleDateClick(e) {
    e.preventDefault();
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
。。。
    return false;
  }
    return (
      <input
        value={datetimeToStr(this.state.curDate, "请选择")}
        onClick={this.handleDateClick}
        class={style.ui_input}>
        <DatePicker
          value={this.state.curDate}
          isOpen={this.state.isOpen}
          ignoreReadonly={true}
          theme={‘ios’}
          min={new Date(2010, 1, 1)}
          max={new Date(2050, 1, 1)}
          dateFormat={[‘YYYY年’, ‘MM月’, ‘DD日’]}
          onSelect={this.handleDateSelect}
          onCancel={this.handleDateCancel} />
      </input>

但是虽然解决了键盘输入的问题,但是滑动选择日期还是不能用了。。。

转载请注明:在路上 » 【已解决】ReactJS中如何禁止input控件获得输入的焦点以避免弹出键盘和输入

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. Try inputProps={{readOnly:true}} or isSearchable={ false }. readonly is not exposed as a direct prop on the component.
    a4年前 (2021-02-19)回复
85 queries in 0.191 seconds, using 22.15MB memory