用户开始输入时如何显示输入的最大长度？答案

【问题标题】：How to display maxlength of input as user starts typing?用户开始输入时如何显示输入的最大长度？
【发布时间】：2018-06-12 04:15:41
【问题描述】：

我网站的输入框是这样的：(click here to view image)

jsx 文件中的代码如下：

render: function () {
    return (
        <form id="addcourse" role="form" className="form-horizontal" enctype="multipart/form-data" ref="courseForm">
            <fieldset>
                <CategoryLoader callback={this.handleCategoryChange}/>
                <div className="form-group">
                    <label className="control-label col-md-2 col-md-offset-1">Title</label>
                    <div className="col-md-7 col-md-offset-1">
                        <input name="title" type="text"  maxLength="6" id="abcd" className="form-control" ref="title" placeholder="Title (Maximum 100 characters)"/>
                    </div>
                </div>
                <div className="form-group">
                    <label className="control-label col-md-2 col-md-offset-1">Course Image</label>
                    <div className="col-md-7 col-md-offset-1">
                        <input name="image" type="file" className="form-control" ref="image"/>
                        <p className="help-block">Upload image for the course </p>
                    </div>
                </div>
                <div className="form-group">
                    <label className="control-label col-md-2 col-md-offset-1">Enrollment Type</label>
                    <div className="col-md-7 col-md-offset-1">
                        <select ref="enrollment_type" name="enrollment_type" className="form-control">
                            <option value="O">Open</option>
                            <option value="M">Moderated</option>
                        </select>
                    </div>
                </div>
                <div className="form-group">
                    <div className="col-md-2 col-md-offset-2  addcoursebutton">
                        <button ref="submit" className="btn btn-primary" type="button" onClick={this.add_course}>Add
                            Course
                        </button>
                    </div>
                    <div className="col-md-1">
                        <button type="button" onClick={this.props.closeCallBack} className="btn btn-danger">
                            Close
                        </button>
                    </div>
                </div>
            </fieldset>
        </form>
    );

我试过 maxLength="6"。

输入时不会超过 6 个字符，但不会出现“最大长度为 6 个字符”之类的错误。

所以，当用户开始在该字段中输入时，我希望它在输入字段下显示一条消息，“最多允许 6 个字符”。

我该怎么做？

【问题讨论】：

您的“问题”只是说明您的要求，而不是任何具体问题。您是否只想在他们尝试输入更多内容时显示消息？如果是这样，您可以向<input/> 添加一个onKeyPress 处理程序，该处理程序在他们尝试键入内容时检查长度，并添加逻辑以在输入值已经是6 个字符时显示错误。可能只是一个简单的布尔状态，然后有条件地渲染一个带有所需“最大字符=6”错误消息的元素。这只是一个例子。
你在项目中使用 jQuery 吗？

标签： javascript reactjs maxlength

【解决方案1】：

试试这个：

$(elementId).onchange(function(){
var len = this.val.length;
if (len > 5)
alert("You cannot exceed max of 6 characters").
});

您也可以使用“onkeypress”事件以及任何其他类型的结果，而不是警报，无论适合什么

【讨论】：

我在函数的 jsx 文件中有上述代码。我可以把你给出的代码放在 jsx 文件中吗？它会起作用吗？
是的，它应该.. 试试看。 .但是你必须输入正确的'elementid'（你的输入元素id）我刚刚使用变量名..

【解决方案2】：

这很简单，反应方式是使用状态。如果您需要更多解释，请告诉我。希望这会有所帮助。

checkMaxLen = e => {
    if (e.target.value.length > 6) {
      this.setState({ errorText: "Length cant exceed more then 6" });
    } else {
      if (this.errorText) {
        this.setState({ errorText: "" });
      }
    }
  };


<input type="text"
  onChange={this.checkMaxLen}
/>
{this.state.errorText && <span>{this.state.errorText}</span>}

【讨论】：

【解决方案3】：

您甚至可以仅使用 CSS 来实现。这里是the explanation

【讨论】：