Как отобразить максимальную длину ввода, когда пользователь начинает печатать? - PullRequest
Новая
       11

Как отобразить максимальную длину ввода, когда пользователь начинает печатать?

0 голосов
/ 12 июня 2018

Поле ввода моего сайта выглядит следующим образом: (нажмите здесь, чтобы посмотреть изображение)

Это код в файле 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 символов».

Как я могу это сделать?

Ответы [ 3 ]

0 голосов
/ 12 июня 2018

Это довольно простой и реагирующий способ сделать это с помощью состояния.если вам нужно больше объяснений, дайте мне знать.надеюсь, это поможет. 

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>}
0 голосов
/ 12 июня 2018

Вы даже можете достичь этого только с помощью CSS.Вот объяснение

0 голосов
/ 12 июня 2018

попробуйте это: 

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

вы также можете использовать событие onkeypress и любой другой тип результата, кроме оповещения, в зависимости от того, что подходит

...