HTML-форма с предварительным заполнением не отправляется в Chrome - PullRequest
Новая
       0

HTML-форма с предварительным заполнением не отправляется в Chrome

3 голосов
/ 20 мая 2011

Мой код работает во всех основных браузерах, кроме Google Chrome, где он ведет себя странно.Я использую Google Chrome 11.0.696.68.Эти факты применимы к Chrome:

  • Если я задаю значения для всех полей ввода, я могу без проблем отправить форму.
  • Если я оставлю поле 'day' пустым и нажмукнопка отправки, форма не отправляется, но фокус почему-то переходит на поле дня.
  • Если я выделю фокус на любое поле, кроме «день», например «другое», и нажмитевведите, форма не отправлена, и фокус снова перейдет к полю дня.
  • Если я выделю фокус на поле пустого дня и нажму клавишу ввода, форма отправлена.
  • Если язакомментируйте строку prefillTextfield( 'candidate_dateOfBirth_day', 'Day' );, все работает нормально.Странно то, что все еще есть подобное поле, которое не вызывает никаких проблем: год.

Это ошибка в Google Chrome или в моем коде? 

    <html>
      <head>
        <title>Submit fails in Google Chrome</title>
        <script type="text/javascript" src="hidden/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
          /**
            * Prefill a textfield
            */
            function prefillTextfield( id, defaultText )
            {
              var element = $( '#' + id );
              var color = 'rgb(153, 153, 153)';

              // Define focus event
              element.focus(
                function()
                {
                  if( element.css( 'color' ) == color )
                  {
                    element.val( '' );
                    element.css( { 'color': '#000' } );
                  }
                }
              );

              // Define blur event
              element.blur(
                function()
                {
                  if( element.val().length == 0 )
                  {
                    element.val( defaultText );
                    element.css( { 'color': color } );
                  }
                }
              );

              // Simulate onblur event.
              element.trigger( 'blur' );
            }

            $( document ).ready( 
              function() 
              {
                prefillTextfield( 'candidate_dateOfBirth_day', 'Day' );
                prefillTextfield( 'candidate_dateOfBirth_year', 'Year' );
              }
            );
        </script>
      </head>

      <body>
        <form onsubmit="javascript: alert( 'Submitted!' ); return false;">
          <div class="formField">
            <label name="dateOfBirth-label">Date of birth</label>
            <input type="text" class="textField" id="candidate_dateOfBirth_day" name="candidate_dateOfBirth_day" maxlength="2" style="width: 60px;" />
            <select id="candidate_dateOfBirth_month" name="candidate_dateOfBirth_month" style="width: 90px; color: #999;">
              <option value="" style="color: #999;">Month</option>
              <option value="01" style="color: #000;">January</option>
              <option value="02" style="color: #000;">February</option>
              <option value="03" style="color: #000;">March</option>
              <option value="04" style="color: #000;">April</option>
              <option value="05" style="color: #000;">May</option>
              <option value="06" style="color: #000;">June</option>
              <option value="07" style="color: #000;">July</option>
              <option value="08" style="color: #000;">August</option>
              <option value="09" style="color: #000;">September</option>
              <option value="10" style="color: #000;">October</option>
              <option value="11" style="color: #000;">November</option>
              <option value="12" style="color: #000;">December</option>
            </select>
            <input type="text" class="textField" id="candidate_dateOfBirth_year" name="candidate_dateOfBirth_year" maxlength="4" style="width: 60px;" />
          </div>
          <div class="formField">
            <label name="dateOfBirth-label">Other input field</label>
            <input type="text" class="textField" id="other" name="other" style="width: 60px;" />
          </div>
          <div class="formField">
            <label name="dateOfBirth-label">&nbsp;</label>
            <input type="submit" class="textField" value="Submit" />
          </div>
        </form>
      </body>
    </html>

Заранее спасибо!

JSFiddle - здесь

Ответы [ 2 ]

3 голосов
/ 20 мая 2011

Такое поведение вызвано словом «День», которое составляет 3 токена, в то время как вы разрешаете только 2.

Если вы замените maxlength=2 на maxlength=3, все в порядке.

Обычно вы получаете собственное сообщение для этого в Chrome, но поскольку вы сами определяете событие focus, это сообщение было подавлено.

Пожалуйста, посмотрите, что произойдет, если вы не определите focus: http://jsfiddle.net/MyewW/2/

И посмотрите, если вы используете maxlength=3: http://jsfiddle.net/MyewW/3/

0 голосов
/ 20 мая 2011

Действительно странное поведение. Я добавил id «myform» в форму и «mysubmit» для отправки. Добавление этого после того, как строки prefillTextfield, кажется, работают. 

$('#mysubmit').click(function(e)
{
  e.preventDefault();
  $('#theform').submit();
});

Не знаю, почему Chrome отправляет фокус на ввод после нажатия кнопки отправки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...