Material-ui: maxLength für Texteingabefeld

Hey @xuansehyun , du solltest nur in der Lage sein, das Attribut maxLength für dein TextField Element wie folgt festzulegen :

<TextField
    style={styles.textfield}
    hintText="Hint Text (MultiLine)"
    multiLine={true} 
    maxLength="2" />

Lassen Sie mich wissen, wenn das nicht funktioniert.

Es funktioniert bei mir, du kannst das schließen, denke ich :)

@otroboe Ich stimme zu.

Wie kann ich einen Validierungsfehler hinzufügen, wenn die Mindestlänge kleiner als die definierte Mindestlänge ist?

<div class="MuiFormControl-root-100" maxlength="2" style="display: block;">
  <div class="MuiInput-root-104 SendAnnouncementFormComponent-textFieldTextRoot-90 MuiInput-formControl-105 MuiInput-multiline-111">
    <textarea class="MuiInput-input-113 SendAnnouncementFormComponent-textFieldTextInput-92 MuiInput-inputMultiline-117" id="announcementText" name="text" placeholder="Update Text" type="text" rows="10" aria-required="false" aria-invalid="false"></textarea>
  </div>
</div>

Ich habe es versucht und es hat nicht funktioniert. Die maxLength endete auf einem div, nicht auf dem Textbereich. Hier ist mein Code, der den obigen HTML-Code generiert hat.

<TextField
              InputProps={{
                id: 'announcementText',
                disableUnderline: true,
                multiline: true,
                rows: 10,
                classes: {
                  root: textFieldTextRoot,
                  input: textFieldTextInput,
                },
              }}
              maxLength="2"
              name="text"
              type="text"
              value={this.state.text}
              onChange={this.handleInputChange}
              placeholder="Update Text"
              style={{ display: 'block' }}
            />

"material-ui": "1.0.0-beta.30",

Update: Ich habe herausgefunden, dass ich dies mit inputProps={{maxLength: 2}} . Das Gehäuse ist wichtig. Es funktioniert nicht mit InputProps

Es gibt keine Dokumentation zu maxLength direkt auf einem TextField .

Ich habe auch Probleme damit, dies mit den Betas zum Laufen zu bringen, und es scheint definitiv, dass es eine Eigenschaft direkt auf der Komponenten-API sein sollte.

@JarLowrey hat es hier beantwortet: https://github.com/mui-org/material-ui/issues/5309#issuecomment -355462588

Als Referenz erwähne ich es auch hier. Versuchen Sie diesen Code, um die Anzahl der Eingabelängen 'zB 10' in [email protected] zu begrenzen:

<TextField
  inputProps={{
    maxLength: 10,
  }}
/>

Beachten Sie, dass InputProps und inputProps zwei verschiedene Eigenschaften von TextField sind. Diese Tatsache verschwendete einige Stunden meines Lebens.

<TextField
  InputProps={{ 
    disableUnderline: true
  }}
  inputProps={{
    maxLength: 10
  }}
/>

Beachten Sie, dass InputProps und inputProps zwei verschiedene Eigenschaften von TextField sind. Diese Tatsache verschwendete einige Stunden meines Lebens.

<TextField
  InputProps={{ 
    disableUnderline: true
  }}
  inputProps={{
    maxLength: 10
  }}
/>

Auf die gleiche Weise funktioniert die Eigenschaft min length auch richtig?

@kenecaswell danke für die Beiträge, ich habe gerade eine Stunde damit verbracht herauszufinden, was ich falsch gemacht habe.

@kenecaswell Du hast gerade ein Leben gerettet 👍 Danke Bruder !!

Wenn type = 'number' vorhanden ist, funktioniert maxLength nicht
Typ = 'Nummer'
inputProps = {{
maxLength: 10,
}}
/>
Es sollte sein:
inputProps = {{
maxLength: 10,
}}
/>

Eine bessere Lösung ohne Attribut (falls sie nicht funktioniert).
Aktualisieren Sie Ihren Status in TextField onChange() nur, wenn die Länge des Werts <YOUR_MAX_LENGTH> .

onChange = (event) => {
// Check if the textfield's that
// you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>

if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
&& event.target.value !== <YOUR_MAX_LENGTH>) {
// Update your state here
}
}

Eine bessere Lösung ohne Attribut (falls sie nicht funktioniert).
Aktualisieren Sie Ihren Status in TextField onChange() nur, wenn die Länge des Werts <YOUR_MAX_LENGTH> .

onChange = (event) => {
// Check if the textfield's that
// you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>

if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
&& event.target.value !== <YOUR_MAX_LENGTH>) {
// Update your state here
}
}

OnChange ist niemals eine bessere Lösung, da es das Ereignis auch nach Erreichen des Limits noch auslöst. Es scheint mit moderner CPU nichts zu sein, aber wir sollten unsere Systeme so gestalten, dass Einschränkungen auf HTML-Ebene durchgesetzt werden, wenn wir können. maxLength ist HTML-Attribut und browserübergreifend kompatibel, auch ohne JavaScript

inputProps={{ maxLength: 365 }} funktioniert bei mir.

Wenn Sie formik-material-ui der folgende Weg:
<Field component={TextField} InputProps={{ inputProps: { maxLength: 5 }, }} />

Ich möchte type='number' , daher besteht die einzige Lösung für mich darin, substring bei setState Teil zu verwenden.

Beispiel:

  const [deposit, setDeposit] = React.useState<number | null>(null);
  const disabled = deposit == null || deposit < 0 || deposit === 0;

  return (
      <TextField
        variant='outlined'
        color='primary'
        fullWidth
        type='number'
        value={deposit}
        onChange={(e) => setDeposit(Number(e.target.value.substring(0, 6)))} // This line to limit the length!
        label='Deposit'
        InputProps={{
          endAdornment: (
            <InputAdornment position='end'>
              <Button
                variant='text'
                disabled={disabled}
                color={'primary'}
                onClick={(_) => onSend(deposit!)}>
                <Typography color='primary'>{'Submit'}</Typography>
              </Button>
            </InputAdornment>
          )
        }}
      />