Chromeã䜿çšããŠããã¹ããã£ãŒã«ããèªåå ¥åãããšããããŒãã£ã³ã°ã©ãã«ããã¹ãã¯ã¢ãã¡ãŒã·ã§ã³åãããããŸã£ãã衚瀺ãããŸããïŒ0.8.0以éïŒ
ããã¯ããããå§ããã®ã«è¯ãå Žæã§ã...
@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ã€ãã³ããçºçããããœãªã¥ãŒã·ã§ã³ã¯ãããŸããïŒ
@antoinerousseauããã¯ãã¹ã¿ãŒã«ããŒãžãããŸããïŒ
@devdlabs https://github.com/callemall/material-ui/pull/3372#issuecomment -191523369
ããã¯åæ§ã®åé¡ã§ããå¯èœæ§ããããŸãïŒåãæ ¹æ¬åå ãç°ãªãçç¶ïŒïŒ
åè¿°ã®ããã«ã¢ãã¡ãŒã·ã§ã³ã®åé¡ã¯çºçããŠããŸããããTextFieldã³ã³ããã®é«ãã¯å ¥åã®äžéšããŒãžã³ãèæ ®ããŠããŸããã ããã«ãããTextFieldãã³ã³ããã®äž14pxã«æ¡åŒµãããŸãã ããã¯ããªãç°¡åãªåé¿çã§ããããªãŒãã³ã³ããªãŒãã§ãã衚瀺ãããŸããã
ããã¯ãŸããªãä¿®æ£ãããŸã;ïŒ
çŽ æµãª@nathanmarks ãããããšãïŒ
ãŸããããŒãžãã¯ãªãã¯ããã«Chromeãèªåå ¥åããããšãã«ããããŒãã£ã³ã°ã©ãã«ãæŽæ°ããããã¯ãèŠã€ããŸãããïŒ
ããã¯ãŸã ããªãèŠçãªåé¡ã§ãã
ããŸããããªãã£ãvanilla-autofill-eventã䜿ã£ãŠã¿ãŸããã
ç§ã¯ïŒä»ã®å€ãã®ããã«ïŒ redux-form
ã䜿çšããŠããŠãéãåé¿çãæãã€ããïŒãã°ã€ã³ãã©ãŒã ã®ããã ãã«ãä»ã®ãã©ãŒã ã¯æ°ã«ããªãïŒã
ã¯ããŒã ã®ã¿ã§ãã¹ãããã®ã§ãæ€èšäžã§ãã
é衚瀺ã®ãŠãŒã¶ãŒåãšãã¹ã¯ãŒãã®ãã£ãŒã«ããè¿œå ãããšãchromeã¯ãã©ãŒã å šäœãç¡èŠããŸããïŒchromeãæ°ã«ããªãdisplayïŒnoneã§é衚瀺ã«ããªãéãïŒã
ãã®ããã4ã€ã®ïŒïŒdispointed :)è¿œå ãã£ãŒã«ãã䜿çšããŸããã 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
ãŸãã
jså€ïŒ {'off'}
ïŒã§ã¯ãªãæååå€ïŒ "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'ïŒ;
ifïŒèªåå
¥åïŒ{
$ïŒ "input [type = password]"ïŒãparentïŒïŒãaddClassïŒ "is-dirty"ïŒ;
}
}ã500ïŒ;
`
ããã¯ãæåŸã«æºåãã§ããŠããããã¥ã¡ã³ãå
ã«ããã¯ãã§ãã
ã¯ã©ã¹ãis-dirtyãã¯ããããŒãã£ã³ã°ã©ãã«ãããªã¬ãŒããã¯ã©ã¹ã§ãã
ç§ã¯react-uiã§redux-formã䜿çšããŠããŸãã ç§ã«ãšã£ãŠã®è§£æ±ºçã¯ãå¿ èŠãªå ¥åã®çŽåŸã«åœã®å ¥åãé 眮ããããšã§ãã
<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ãã©ã³ãã§éãã§ããéãããã®åé¡ã¯éäžã§ä¿®æ£ãããŸããã ããã¯reactã®æžãçŽããŸãã¯ã¢ããã°ã¬ãŒãã§ããå¯èœæ§ããããŸãã ããã«ã€ããŠãã£ãšèããŸã§ãç§ã¯éããŠããŸãã ããã§ã®è°è«ã«æè¬ããŸãïŒ
ãšã©ãŒã¯ãŸã ååšããŸã...
ãããªã¢ã«[email protected]
[email protected]
Chrome 60.0.3112.90
@artalar componentDidMount
ãœãªã¥ãŒã·ã§ã³ãè©ŠããŠã¿ãŠãã ããOïŒâ©_â©ïŒO
@Stupidism解決ããŠãããŠããããšãïŒ ç§ã¯äžèšã®ãã¹ãŠãè©ŠããŸããããã©ããããŸããããŸããã§ããã ãã¶ããããã®ã»ãšãã©ã1ã2æ³ã ããã§ã...
ãšããã§ããã®ãã°ã¯Chromeã§ã®ã¿çºçããFirefoxã¯å®å
šã«åé¡ãããŸãã:)
@ Ivan-Parushevåç §ã®äœ¿çšæ³ãå€æŽãããããã ãšæããŸãã ããã§ãããªãã®åé¡ã¯è§£æ±ºããããã©ããïŒ
ããã§ã¯è§£æ±ºãããŠããŸãããcomponentDidMountã«å€ãååšããå Žåã¯localStorageããå€ãå ¥åãããã¹ãŠã®ææ°ããŒãžã§ã³ã§åããšã©ãŒãçºçããŸãã
ãŸã ä¿®æ£ãåŸ ã£ãŠããŸã...
ã¹ã¬ãããããã¯ããŠããŸãã ãã®å·ã¯2幎åã®ãã®ã§ãã çŸåšãv1-betaãã©ã³ãã«çŠç¹ãåãããŠããŸãã 誰ããè€è£œã®äŸãæã£ãŠãããªããv1-betaãã©ã³ãã®æ°ããåé¡ãéããŠãã ããã
3幎ã«ãªããŸãã ãã®åé¡ã¯ãææ°ã®reactããã³materialuiããŒãžã§ã³ã§ãåŒãç¶ãååšããŸãã
@tschaub Hahaã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ãããã 1ã€ã®è³ªåïŒCDNãªã³ã¯ã䜿çšããŠHTMLã«ãããªã¢ã«UIãçŽæ¥äœ¿çšã§ããŸããïŒ MDLãæ»ãã§ããããšã«æ°ã¥ããªãã£ãïŒcryïŒ
@ kishan3ããããšãã§ããŸããããã¯ããã¥ã¡ã³ãã§è¿°ã¹ãŠããããã«ãã¯ã©ã€ã¢ã³ããæã£ãŠãããã®æ段ã¯ãããæ§ç¯ããäžæ¹ã§ãããããã£ãã·ã¥ãããå°ãªããšã第äžã®æéãŸã§ãã©ã€ãã©ãªå šäœãããŠã³ããŒããããã®ã®ãããŒã«ã«ã«ããªããã³ã³ããŒãã³ããå«ãŸããŠããæé©åã§ããããšãæå³ããŸãã
解決çã¯äœã§ããïŒ
ãã®åé¡ã¯v0.xã«é¢ä¿ããŠããŸãã
@oliviertassinariãã®
ç§ã®å ŽåãããããããŠã³ã䜿çšããŠããŸãããŠãŒã¶ãŒãããããããŠã³ã§äœããéžæãããšãå€ãç¶æ ã«èšå®ãããå€ã«é¢é£ä»ããããTextFieldã¯ã©ãã«ããããŒãããŸããã
ç·šéïŒã©ããããTextFieldå€ãnull
åæåãããšãæ°ããå€ãæž¡ãããŠããããŒãã¯ç§»åããŸããã 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ãåç §ããŠãã ããã
æåã®è§£æ±ºçã¯ããããªã¢ã©ã€ãºã®äœ¿çšããããŠ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ã®åäœã¯åãã§ããã¯ãã ãšæã£ããããããã¹ããã£ãŒã«ãã³ã³ããŒãã³ããæ£ããå ¥åãããŠããªãããšã«æ°ä»ããŸããã
ã芧ã®ãšããã2ã€ã®ãã¹ãããããªããžã§ã¯ããæ··åãããšãæ£ããå ¥åãããŸããã
ç§ã¯ã©ã€ãã©ãªã䜿çšããŠããã解決ããã®ã§ãããã§ããã
Material-UIã®ææ°ããŒãžã§ã³ïŒv4.9.0ïŒã¯ããã©ã«ãã§ããããµããŒãããŠããããšã«æ³šæããŠãã ããã
æãåèã«ãªãã³ã¡ã³ã
誰ãããŸã ããã«ããå Žåã¯ãããã圱é¿ããTextFieldã«ãã®å°éå ·
InputLabelProps={{ shrink: true }}
ãèšå®ããŸãã ç§ãã¡ã®ããŒã ã«ãšã£ãŠæè¯ã®è§£æ±ºçã§ããã