最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Maxlength property of input field is not respected - Stack Overflow

programmeradmin2浏览0评论

I have the following React method which should create an input field with a maximum length:

displayInputField: function(name, placeholder, updateMethod, maxLength) {
        return (
            <div className="form-group form-inline">
                <label>{name}</label>
                <input onChange={updateMethod} type="text" className="form-control"
                     maxlength={maxLength} placeholder={placeholder}/>

            </div>
        );
    },

However, the input field generated does not stop me from inputting more characters. Its source is this:

<input type="text" class="form-control" placeholder="<15 characters" data-reactid=".0.1.2.0.0.1.2.1.0.1">

Why is the maxlength attribute not respected?

I have the following React method which should create an input field with a maximum length:

displayInputField: function(name, placeholder, updateMethod, maxLength) {
        return (
            <div className="form-group form-inline">
                <label>{name}</label>
                <input onChange={updateMethod} type="text" className="form-control"
                     maxlength={maxLength} placeholder={placeholder}/>

            </div>
        );
    },

However, the input field generated does not stop me from inputting more characters. Its source is this:

<input type="text" class="form-control" placeholder="<15 characters" data-reactid=".0.1.2.0.0.1.2.1.0.1">

Why is the maxlength attribute not respected?

Share Improve this question asked Dec 18, 2015 at 12:29 bskybsky 20.2k54 gold badges166 silver badges282 bronze badges 8
  • 3 Should it be maxLength? (Note the capital L!) – TwoStraws Commented Dec 18, 2015 at 12:35
  • maxLength argument is not a null? – z1m.in Commented Dec 18, 2015 at 12:35
  • @TwoStraws, It should not be that strict. The HTML5 standard does not require lowercase attribute names. – Rayon Commented Dec 18, 2015 at 12:40
  • 1 He's not using HTML, he's using JSX. – TwoStraws Commented Dec 18, 2015 at 12:40
  • 2 It becomes JavaScript that ultimately leads to HTML, yes, but as you can see the output HTML has no maximum length attribute at all – either maxLength or maxlength :) – TwoStraws Commented Dec 18, 2015 at 12:43
 |  Show 3 more comments

3 Answers 3

Reset to default 15

Your problem here was that you had written maxlength when in JSX it should have been maxLength. This lower camel case approach is the same for all HTML attributes, e.g. cellPadding, encType, and so on.

Remember, your JSX ultimately is JavaScript; you should read the list of supported tags and attributes if you're not sure.

Just try below implementing in your input field

onInput={(e) => {e.target.value = Math.max( 0,    parseInt(e.target.value)).toString().slice(0, 4);}}

This works for me:

<input className="form-control" maxLength={30} size={30} name="subject" />
发布评论

评论列表(0)

  1. 暂无评论