Material-ui: टेक्स्ट-इनपुट बॉक्स के लिए अधिकतम गति

को निर्मित 2 सित॰ 2015  ·  17टिप्पणियाँ  ·  स्रोत: mui-org/material-ui

नमस्ते मैं सोच रहा था कि क्या पाठ-इनपुट की अधिकतम लंबाई निर्धारित करने के लिए एक संपत्ति है ताकि जब उपयोगकर्ता एक निश्चित मात्रा में अक्षरों में प्रवेश करे तो वे किसी भी अधिक में प्रवेश करने में सक्षम नहीं होंगे?
आपका बहुत बहुत धन्यवाद!

TextField question

सबसे उपयोगी टिप्पणी

ध्यान दें कि InputProps और inputProps TextField के दो अलग-अलग गुण हैं। इस तथ्य ने मेरे जीवन के कुछ घंटे बर्बाद कर दिए।

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

सभी 17 टिप्पणियाँ

अरे @xuansehyun , आपको सिर्फ इतना पसंद करने में सक्षम होना चाहिए कि maxLength आपके TextField तत्व पर उपलब्ध हो:

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

मुझे पता है कि अगर काम नहीं करता है।

यह मेरे लिए काम करता है, आप इसे मेरे विचार से बंद कर सकते हैं :)

@otroboe मैं सहमत हूँ।

मैं कैसे सत्यापन त्रुटि जोड़ सकता हूँ यदि न्यूनतम लंबाई कम है तो परिभाषित minLength है

<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>

मैंने यह कोशिश की और यह काम नहीं किया। मैक्सिमम डायवोर्स पर समाप्त होता है, न कि टेक्सारिया पर। यहाँ मेरा कोड है जो उपरोक्त HTML उत्पन्न करता है।

<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",

अपडेट: मुझे पता चला कि मैं inputProps={{maxLength: 2}} का उपयोग करके यह काम कर सकता हूं। आवरण महत्वपूर्ण है। यह InputProps पर काम नहीं करता है

TextField पर सीधे maxLength के बारे में कोई दस्तावेज नहीं है।

मुझे बीटस के साथ काम करने में भी परेशानी हो रही है, और यह निश्चित रूप से ऐसा लगता है कि यह सीधे घटक एपीआई पर एक संपत्ति होनी चाहिए।

@JarLowrey ने यहां इसका जवाब दिया: https://github.com/mui-org/material-ui/issues/5309#issuecomment -355462588

संदर्भ के लिए मैं यहां भी इसका उल्लेख करता हूं। [email protected] में इनपुट लंबाई 'उदा 10' की संख्या को सीमित करने के लिए, इस कोड को आज़माएं:

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

ध्यान दें कि InputProps और inputProps TextField के दो अलग-अलग गुण हैं। इस तथ्य ने मेरे जीवन के कुछ घंटे बर्बाद कर दिए।

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

ध्यान दें कि InputProps और inputProps TextField के दो अलग-अलग गुण हैं। इस तथ्य ने मेरे जीवन के कुछ घंटे बर्बाद कर दिए।

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

उसी तरह न्यूनतम लंबाई संपत्ति भी सही काम करती है?

@kenecaswell पदों के लिए धन्यवाद, मैं सिर्फ एक घंटे बिताने की कोशिश कर रहा था कि मैं क्या गलत कर रहा था।

@kenecaswell आपने बस एक जीवन बचाया

यदि प्रकार = 'संख्या' है, तो अधिकतम गति काम नहीं करेगी
type = 'संख्या'
inputProps = {{
अधिकतम गति: 10,
}}
/>
यह होना चाहिए:
inputProps = {{
अधिकतम गति: 10,
}}
/>

बिना किसी विशेषता के एक बेहतर समाधान (यदि वे काम नहीं करते हैं)।
आपके TextField onChange() , अपने राज्य को तभी अपडेट करें जब मूल्य की लंबाई <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
}
}

बिना किसी विशेषता के एक बेहतर समाधान (यदि वे काम नहीं करते हैं)।
आपके TextField onChange() , अपने राज्य को तभी अपडेट करें जब मूल्य की लंबाई <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 कभी भी बेहतर समाधान नहीं है क्योंकि यह सीमा समाप्त होने के बाद भी घटना को आग लगा देगा, यह आधुनिक सीपीयू के साथ कुछ भी नहीं लग सकता है, लेकिन हमें अपने सिस्टम को HTML स्तर पर प्रतिबंध लागू करने के लिए डिज़ाइन करना चाहिए अगर हम कर सकते हैं। अधिकतम गति HTML विशेषता है और जावास्क्रिप्ट के बिना भी संगत क्रॉस ब्राउज़र

inputProps={{ maxLength: 365 }} मेरे लिए काम करता है।

यदि आप formik-material-ui का उपयोग कर रहे हैं, तो जाने का तरीका होगा:
<Field component={TextField} InputProps={{ inputProps: { maxLength: 5 }, }} />

मैं type='number' का उपयोग करना चाहता हूं, इसलिए मेरे लिए एकमात्र उपाय substring का उपयोग setState भाग में करना है।

उदाहरण:

  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>
          )
        }}
      />
क्या यह पृष्ठ उपयोगी था?
0 / 5 - 0 रेटिंग्स