Question

我网站的输入字段如下所示：(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 =＆＃34; 6＆＃34;。

输入中不会超过6个字符，但它不会给出任何错误，例如＆＃34;最大长度为6个字符。＆＃34;

因此，当用户开始输入该字段时，我希望它在输入字段下显示一条消息，＆＃34;允许最多6个字符＆＃34;。

我该怎么做？

Answer 1

试试这个：

<system.web>
    <authentication mode="Forms">
        <forms defaultUrl="/" loginUrl="/Account/Login" name="_User" timeout="60" path="/" />
    </authentication>
    <sessionState mode="InProc" timeout="60" />
    <compilation targetFramework="4.7" />
    <httpRuntime targetFramework="4.7" executionTimeout="3600" maxRequestLength="52428" />
    <globalization culture="en-US" uiCulture="en-US" fileEncoding="utf-8" requestEncoding="utf-8" responseEncoding="utf-8" responseHeaderEncoding="utf-8" />
    <customErrors mode="Off" defaultRedirect="/" redirectMode="ResponseRedirect" />
</system.web>

你也可以使用'onkeypress'事件以及除警报之外的任何其他类型的结果

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

Answer 3

你甚至可以用CSS实现它。这是the explanation

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

3 个答案: