Material-ui: [TextField]表单自动填充不会更新文本字段上的浮动标签文本

这可能是一个不错的起点。

@illogikal您可以张贴gif吗？

干得好：

黄色高亮显示字段已自动填充。 如您所见，密码已填写，但标签仍然存在。

嗯，这很有趣。 @mbrookes您知道这是用于所有输入类型还是仅用于密码输入？

不确定-我尝试交换地址和密码的顺序，但是自动填充并没有触发，要么填充了已知的用户/密码，要么保存了新密码。 我将不得不弄清楚如何最好地测试其他领域。

好的，我计划在不久的将来重新重构一些TextField内容。 我也会尝试一些实验。 让我知道您是否还注意到其他情况。

你好！ 我们正在遇到这个问题。 我们可以在本地做些什么尝试并尝试一些潜在的解决方案吗？ 还是需要等待重构？

我们上面列出的密码字段确实有问题。 除此之外，我们对于普通的TextField也有类似的问题。 我们提供了提示文本集，如果您键入值，该提示文本将消失。但是，如果在页面呈现（深层链接）时设置一个值，则提示文本仍会在实际值后面可见。 这可能是同一个问题，还是分开？

这可能是同一个问题，还是分开？

看起来是另外一个问题。

修复灵感： https :

该代码可以添加到onChange以更新state.isAutofilled

Chrome版本49.0.2623.87（64位）OS X El Capitan

如果按下任何键或单击鼠标-它会正确浮动，但初始负载将被破坏。

完全一样的问题：

知道吗，伙计们？

遇到相同的问题。

有没有办法禁用适用于MUI的自动填充？

@ kand617

只需创建几个字段，然后使用“ display：none ”将其隐藏即可。 例：

然后在下面放置您的真实字段。

http://stackoverflow.com/questions/15738259/disabling-chrome-autofill

解决onChange事件的任何解决方案？

@devdlabs https://github.com/callemall/material-ui/pull/3372/文件

@antoinerousseau这将被合并在主人吗？

@devdlabs https://github.com/callemall/material-ui/pull/3372#issuecomment -191523369

这可能是一个类似的问题（相同的根本原因，不同的表现形式？）

我没有看到提到的动画问题，但是TextField容器的高度没有考虑输入的上边距。 这导致TextField在容器下方延伸14px。 这是一个非常简单的解决方法，但是我只能通过自动完成功能看到它：

这将很快得到解决；）

好@nathanmarks ，谢谢！

并且您是否找到了在Chrome自动填充时无需点击页面即可更新浮动标签的黑客？

这仍然是一个非常痛苦的问题。

我尝试使用香草自动填充事件，但这根本没有用。

我正在使用redux-form （和其他许多方法一样），但遇到了一个丑陋的解决方法（仅对于我的登录表单，我不在乎其他表单）。
我仅在铬中测试过它，因此请考虑使用它。

当我添加一个隐藏的用户名和密码字段时，chrome忽略了整个表单（除非使用display：none将其隐藏，而chrome不在乎）。

因此，我使用了4个（：disappointed：）额外字段。 2使chrome忽略我的表单（autocomplete = off不起作用），另外2个在不同的伪表单中进行chrome填充，与componentDidMount相比，我添加了一个超时，该超时使用redux将伪字段中的值复制到真实字段中形式的更改事件：

class Login extends Component {
  // This was tested under chrome only. It's ugly, but it works. Code was modified a bit for simplicity so it might not work out of the box.

  componentDidMount() {
    // Fix chrome auto-fill
    setTimeout(() => {
      const { change, dispatch }= this.props;
      if (this.refs.usernameAutoFill.value && ! this.refs.username.value) {
        dispatch(change('username', this.refs.usernameAutoFill.value));
      }
      if (this.refs.passwordAutoFill.value && !this.refs.password.value) {
        dispatch(change('password', this.refs.passwordAutoFill.value));
      }
    }, 500);
  }

  render() {
    const styles = {
      autofill: {
        height: 0,
        width: '1px',
        position: 'absolute',
        left: 0,
        top: 0
      }
    };

    return (
      <div>
        <form style={styles.autofill}>
          <input type="text" ref="usernameAutoFill" name="usernameAutoFill" />
          <input type="password" ref="passwordAutoFill" name="passwordAutoFill" />
        </form>
        <form autocomplete="off">
          <div style={styles.autofill}><input type="text" name="fakeusername" /><input type="password" name="fakepassword" /></div>
          <Field name="username" component={() => <TextField ref="username" name="username" floatingLabelText="Username" />}/>
          <Field name="password" component={() => <TextField ref="password" name="password" type="password" floatingLabelText="Password" />}/>
          <RaisedButton primary={true} label="Login" type="submit"/>
        </form>
      </div>
    )
  }
}
export default {
  Form: reduxForm({
    form: 'Login'
  })(Login)
}

为了简化起见，我修改了代码，仅供参考。

@ adamtal3是autoComplete="off"

@justinko并不重要。 如果您使用autoComplete react将其更改为autocomplete 。
您可以看到我使用了字符串值（ "off" ）而不是js值（ {'off'} ）。

如果您指的是React标准和一致性，那我同意，但是我认为这没什么大不了的。

这是我的解决方案。

首先，我检查了组件安装后用户名是否自动填充。
如果是，我将更新密码字段的状态。
一旦hasValue变为true，浮动标签将被更新。

componentDidMount() {
    setTimeout(() => {
        if(this.refs.username.getValue()) {
            this.refs.password.setState({...this.refs.password.state, hasValue: true})
        }
    }, 100)
}

希望这可以帮助。 :)

当浏览器自动填充浮动标签时，我找到了一种更新浮动标签的方法。
`

setTimeout（function（）{
var autofilled = document.querySelectorAll（'input＃password：-webkit-autofill'）;
如果（自动填充）{
$（“ input [type = password]”）。parent（）。addClass（“ is-dirty”）;
}
}，500）；
`
这应该在文档内部，最后准备好。
“ is-dirty”类是触发浮动标签的类。

我正在将redux-form与react-ui一起使用。 对我来说，解决方案是将伪造的输入放在所需的输入之后。

  <TextField
     {...password}
     type="password"
     placeholder={formatMessage(messages.loginPasswordPlaceholder)}
     disabled={submitting}
   />
   <Icon name="password" className={theme.icon}/>
   <input className={theme.hiddenInput} type="password" />

有望由React 16修复： https :

当我从0.17.1更新到0.18.1时，我遇到了同样的问题

修复对我有用的方法：

class FixedTextField extends Component {
    constructor() { 
       super()
       this.state = { value: '' } }
    }
    textfield = null

    componentDidMount() {
        requestAnimationFrame(() => {
            this.setState({ value: this.textfield.getInputNode().value })
        })
    }
    render() {
       return <TextField {...this.props} value={this.state.value} />
    }
}

该修复程序的后端口刚刚在React 15.6.0 。 任何人都可以测试它是否可以解决此问题？

[仅供参考：上面的“我也是”帖子将被删除-请使用投票按钮，而不要动动讨论。]

@mbrookes我测试时未固定。

@愚蠢细节？

就像您2年前发布的一样。 https://github.com/callemall/material-ui/issues/718#issuecomment -167445748

@Stupidism什么版本的Material-UI，什么版本的React，什么浏览器/版本？

  "name": "material-ui",
  "version": "0.18.3",

  "name": "react",
  "version": "15.6.0",



md5-f7a2844706b5476282e07a6c64e29edb



Google Chrome   59.0.3071.86 (Official Build) (64-bit)
OS  Linux
JavaScript  V8 5.9.211.31

：man_shrugging：在这种情况下， @ whtang906的解决方法似乎是目前的最佳选择。

对于redux形式

  constructor(props) {
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.refUsername = this.refUsername.bind(this);
    this.refPassword = this.refPassword.bind(this);
  }

  componentDidMount() {
    setTimeout(() => {
      if(this.usernameRef.getValue()) {
        this.passwordRef.setState({...this.passwordRef.state, hasValue: true});
      }
    }, 100)
  }

  refUsername(component) {
    this.usernameRef = component.getRenderedComponent().refs.component;
  }
  refPassword(component) {
    this.passwordRef = component.getRenderedComponent().refs.component;
  }


            <Field
              name="username"
              withRef
              ref={this.refUsername}
              component={TextField}
            />

            <Field
              name="password"
              type="password"
              withRef
              ref={this.refPassword}
              component={TextField}
            />

我的应用有点慢，所以我加了保险

  componentDidMount() {
    let times = 0;
    const interval = setInterval(() => {
      times += 1;
      if(this.usernameRef.getValue()) {
        this.passwordRef.setState({...this.passwordRef.state, hasValue: true});
        clearInterval(interval);
      } else if (times >= 10) {
        clearInterval(interval);
      }
    }, 100)
  }

无法从Chrome自动填充的密码字段获取值
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password

就我一直在使用v1-beta分支而言，此问题已得到解决。 它可能是rewrite的重写或升级。 我要关闭，直到我们听到更多有关它的信息。 感谢您在这里的讨论！

错误仍然存​​在...
[email protected]
[email protected]
铬60.0.3112.90

@artalar只需尝试componentDidMount解决方案O（∩_∩）O

@Stupidism谢谢您的解决方案！ 我已经尝试了以上所有方法，但没有一个起作用。 可能是因为其中大多数人是1-2岁...
顺便说一句，此错误仅在Chrome中发生，Firefox非常好:)

@ Ivan-Parushev我想这是因为ref的用法已更改。 那您的问题解决了吗？

此处未解决，如果它们存在于componentDidMount上，我会从localStorage中填充值，并且所有最新版本都存在相同的错误。

仍在等待修复...

我正在锁定线程。 这个问题已有2年历史了。 由于我们现在专注于v1-beta分支。 如果有人有复制示例，请为v1-beta分支打开新一期。

到现在已经三年了。 最新的react和material ui版本仍然存在此问题。

@tschaub哈哈，就像ios位置固定的输入一样，成为焦点问题。

@tsmirnov是时候让您陷入困境，然后进行修复。 😜

这个错误有一个CSS解决方案

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

干得好：

黄色高亮显示字段已自动填充。 如您所见，密码已填写，但标签仍然存在。

我正面临着同样的问题。

这个错误有一个CSS解决方案

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

您能解释一下这是什么意思吗？

这个错误有一个CSS解决方案

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

您能解释一下这是什么意思吗？

：-webkit-autofill通过浏览器选择自动填充的字段。 将标签放置在输入旁边，然后使用：-webkit-autofill选择器进行选择。 如果您需要更多帮助，请分享您当前的html结构。

这个错误有一个CSS解决方案

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

您能解释一下这是什么意思吗？

：-webkit-autofill通过浏览器选择自动填充的字段。 将标签放置在输入旁边，然后使用：-webkit-autofill选择器进行选择。 如果您需要更多帮助，请分享您当前的html结构。

当然！ 这是我的HTML，请帮忙。 谢谢
https://pastebin.com/yjJCip3r

这个错误有一个CSS解决方案

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

您能解释一下这是什么意思吗？

：-webkit-autofill通过浏览器选择自动填充的字段。 将标签放置在输入旁边，然后使用：-webkit-autofill选择器进行选择。 如果您需要更多帮助，请分享您当前的html结构。

当然！ 这是我的HTML，请帮忙。 谢谢
https://pastebin.com/yjJCip3r

您的标签紧接在输入之后，因此您无需对html进行任何操作。
只需选择自动填充输入旁边的标签，然后为它们设置您的活动标签样式，如下所示。

.mdl-textfield__input:-webkit-autofill + .mdl-textfield__label {
    // Active label styles here
    top: -20px; // Just an example
    transform: scale(0.75); // Just an example
}

呃， @ kishan3我想你迷路了。 MDL是这种方式-> https://github.com/google/material-design-lite/issues/4827😆

（尽管考虑到MDL已经死了，吉姆，也许您毕竟来对地方了！）

啊，该死！ 它与名称混淆。 ：laughing： @mbrookes但是，一个问题：我们可以直接在CDN链接的HTML中使用实质性UI吗？ 我从未意识到MDL已死：cry：

@ kishan3您可以，尽管正如在文档中说的那样，这意味着客户端必须至少在第一次缓存之前才下载整个库，而在本地构建它意味着您可以优化包含的组件。

有什么解决办法？

此问题与v0.x有关。

@oliviertassinari这个提要在v3.4.0中存在。

就我而言，我使用的是下拉菜单，当用户在下拉菜单中选择某项然后将值设置为状态时，与该值关联的TextField不会浮动标签。

编辑：看来，如果我用null初始化TextField值，那么当传递新值时浮点数将不会移动。 通过使用空字符串而不是null初始化状态值来解决

如果仍然有人在这里，我只需在实现此效果的TextField上设置此道具InputLabelProps={{ shrink: true }} 。 是我们团队的最佳解决方案。

@ tom-con谢谢男人，它非常适合我

这个问题在2019年仍然存在...

如果仍然有人在这里，我只需在实现此效果的TextField上设置此道具InputLabelProps={{ shrink: true }} 。 是我们团队的最佳解决方案。
我真的很困惑，您解决了这个问题！ 最佳推荐解决方案！

这是v0.x版（2015），请参阅＃14427。

这个错误有一个CSS解决方案

// Selects label that comes right after the autofilled input
input:-webkit-autofill + label {
    // Insert your active label styles
}

@ozturkcangokkaya您好，此CSS解决方案在Chrome中可以正常运行。 但是，当我在Firefox中检查表单时，浮动标签不起作用。 您知道为什么webkit-autofill影响Firefox吗？

有关v4，请参见＃14427。

最好的解决方案是停止使用Materialize，并使用Bootstrap或其他库，因为您必须提出解决方法，而Google似乎对解决此问题没有兴趣。

如果仍然有人在这里，我只需在实现此效果的TextField上设置此道具InputLabelProps={{ shrink: true }} 。 是我们团队的最佳解决方案。

谢谢，我使用的是： InputLabelProps={{ shrink: form.password }} ，它可以完美运行。

<TextField
                id="loginPassword"
                label="Login Password"
                type="text"
                fullWidth
                value={form.password}
                onChange={(e) => setAttribute('form.password', e.target.value)}
                InputLabelProps={{ shrink: form.password }}
              />

我解决了在项目上安装lodash.merge的问题，然后意识到我不正确地填充了文本字段组件，这是因为我认为使用嵌套对象时redux的行为应该相同。

如您所见，混合两个嵌套对象时，我无法正确填充。

我使用库解决了这个问题，事实如此。

请注意，默认情况下，最新版本的Material-UI（v4.9.0）支持。