Как сделать чтоб в вк сообщение отправлялось при нажатии на enter: «Как в ВК сделать так, чтобы при написании сообщения, при нажатии на enter переключалось на новую строку, а не отправлялось сообщение? » — Яндекс Кью

Разное

при нажатии Enter отрабатывает первая в HTML-коде формы кнопка

20.04.2011 14:54:04

Рогозина Елена Геннадьевна

При нажатии Enter отрабатывает первая в HTML-коде формы кнопка. Подскажите, пожалуйста, что это за свойство и чьё оно?

21.04.2011 8:33:59

Захваткин Илья Сергеевич

При нажатии на Enter при фокусе любого элемента управления, кроме TEXTAREA, сработает та кнопка SUMBIT, которая выще в DOM-дереве документа. Поэтому разместите нужную кнопку первой, перед ругими кнопками…

Например, так:

http://russianpenguin.blogspot.com/2009/08/html-submit.html

21.04.2011 11:36:07

Петров Евгений Георгиевич

Небольшое примечание.

Даже если ни одной кнопки кнопки с типами submit или image нет, то отправка формы все равно произойдет при нажатии на enter при любом ее активном поле (кроме textarea, конечно).

21.04.2011 13:40:09

Рогозина Елена Геннадьевна

Спасибо!

Проблема вот какая: на форме несколько input типа text и submit.Хотелось бы, чтобы после заполнения input (type=text, id = i1, i2, i3…) по Enter (фокус в input) отрабатывались события submit.onclick(submit id = b1, b2, b3… соответственно).

Обработка событий происходит на сервере, технология ASP.NET.

Я пробовала решить проблему с помощью JavaScript — подписаться на события при загрузке страницы. Всё равно отрабатывает первый submit.

 

21.04.2011 14:13:21

Захваткин Илья Сергеевич

Несколько SUMBIT — это не очень хорошя практика. А зачем так сложно-то?

21.04.2011 18:07:24

Рогозина Елена Геннадьевна

Это форма поиска обозначения документов(чертежей, в основном) по различным критериям. Например, по названию работы документа, по обозначению(шифру) работы, для которой выпущен документ, по заказчику работы, по номеру и дате письма отправки заказчику, по номеру наряда, задания и др.

Задача — получить обозначение(шифр) работы документа, затем перенаправить пользователя(по просьбе пользователя) на страницу, где он может посмотреть состав этой работы, выбрать нужный документ и посмотреть его изображение.

Чтобы сформировать select, содержащий заказчиков, например(а их очень много), я использую вспомогательное текстовое поле, куда пользователь вводит часть названия заказчика. Затем button «Найти» (а хотелось бы Enter), и в select появляется список заказчиков, содержащих данную подстроку. Я хотела использовать какой-нибудь элемент из Ajax toolkit, но там фильтрация по начальным символам, а пользователь помнит всегда что-нибудь из середины.

Аналогично по  отправке, наряду, заданию, шифру родительской работы.

Названия работы — в текстовых полях(их несколько — по смысловым частям шифра).

Когда пользователь заполнил все поля(одно или несколько), он нажимает кнопку «Найти шифр работы» (а хотелось бы Enter) и получает список шифров работ, удовлетворяющих заданным критериям. Выбирает интересующий и переходит на страницу, где видит состав выпущенной по этой работе документации. Находит нужный документ и просматривает его изображение и другие свойства.

Просто хотелось, чтобы пользователь не хватался за мышку всякий раз, а работал с клавиатурой.

 

22.04.2011 11:06:13

Петров Евгений Георгиевич

Фоновое получение данных, фильтрация этих данных при вводе в поле, вывод результатов на месте — типичные задачи JS. Никаких кнопок для отправки тут не нужно.

Так что получилось как обычно — вы неверно сформулировали вопрос и получили ответы, не содержащие решения проблемы. Потому как проблема вовсе не в порядке кнопок в коде.

Ищите по словам «плагин js фильтрация»

http://ruseller. com/lessons.php?rub=32&id=763

http://winchanger.narod.ru/jquery/plugins/livefilter.htm

25.04.2011 6:52:44

Рогозина Елена Геннадьевна

Спасибо!

У меня одна Master Page и 8 обычных страниц, из которых только на трёх используется поиск. Где лучше подключать плагин — в head или непосредственно на страницах с поиском в ContentPlaceHolder?

 

25.04.2011 14:43:14

Рогозина Елена Геннадьевна

Боюсь, что этот плагин мне не подходит. Он работает со строками списка или таблицы, которые уже содержатся в коде html-страницы, пришедшей на компьютер пользователя.

На данный момент в базе более 500 заказчиков, 10500 нарядов, 13000 заданий и 32100 шифров. Получается, что всю эту информацию нужно доставить на компьютер пользователя. Это при том, что пользователь может вести поиск совсем по другим критериям, и данная информация окажется ненужной.

Хотелось бы, чтобы после введения, например, трёх символов в поле input на сервер отправлялся запрос, который возвращал бы в select строки, содержащие заданную подстроку.

26.04.2011 20:46:33

Петров Евгений Георгиевич

Так а кто мешает получить ответ от сервера, сформировать на его основе элементы в документе и по ним фильтровать?

28.04.2011 10:59:46

Рогозина Елена Геннадьевна

Зачем тащить на клиента 50000 записей, которыми пользователь, возможно, и не воспользуется?

Разве невозможно фоновое получение данных с сервера? Фильтрация данных на сервере по запросу пользователя без перезагрузки всей страницы?

 

28.04.2011 19:28:35

Петров Евгений Георгиевич

Так а вам про что говорят? Сделали запрос на сервер, получили нужный кусок, сформировали список и фильтруйте.

Кто же принуждает грузить всю информацию скопом?

Написать сообщение

Валидация формы в Javascript

Мы с вами изучили базовые методы для работы с DOM. в заключение хотелось бы на практике применить то, чему мы научились.

Поэтому в этом уроке мы с вами напишем валидацию формы на javascript. То есть мы будем проверять данные и условия во всех полях, и если в них есть ошибки, то выводить их на экран.

Давайте добавим нашу форму. Главное, что нам нужно сделать, это добавить классы на все елементы формы, с которыми нам прийдется взаимодействовать.

<form>
  <div>
    <div>
      <label>From:</label>
    </div>
    <div>
      <input type='text' />
    </div>
  </div>
  <div>
    <div>
      <label>Password:</label>
    </div>
    <div>
      <input type='password' />
    </div>
  </div>
  <div>
    <div>
      <label>Password confirmation:</label>
    </div>
    <div>
      <input type='password' />
    </div>
  </div>
  <div>
    <div>
      <label>Where</label>
    </div>
    <div>
      <select>
        <option></option>
        <option value='developers'>Developers</option>
        <option value='managers'>Managers</option>
        <option value='devops'>DevOps</option>
      </select>
    </div>
  </div>
  <div>
    <div>
      <label>Message:</label>
    </div>
    <div>
      <textarea></textarea>
    </div>
  </div>
  <input type='submit' value='Validate'/>
</form>

Теперь давайте писать валидацию формы. Сначала мы бы хотели найти все элементы, с которыми мы будем работать, но мы хотим их не просто искать в DOMе, а только внутри класса formWithValidation, так как это обезопашивает нас от того, что такие классы будут использоваться где-то еще.

Давайте найдем с вами кнопку Validate

var validateBtn = document.querySelector('.formWithValidation .validateBtn')

Как вы видите, каждый раз, когда мы захотим находить елемент внутри formWithValidation, нам прийдется указывать его в querySelector. Старайтесь всегда избегать лишних и ненужных повторений кода.

В данном случае мы можем вынести поиск formWithValidation отдельно и все остальные елементы искать относительно него

var form = document.querySelector('.formWithValidation')
var validateBtn = form.querySelector('.validateBtn')

Так намного читабельнее. Теперь давайте начнем писать код, а остальные елементы будем добавлять по мере надобности.

Сейчас нам нужно повесить евент submit на нашу форму.

Тогда при нажатии enter на любом поле либо на клик Validate, форма отправится. Мы с вами это уже делали

form.addEventListener('submit', function () {
  console.log('clicked on validate')
})

Если мы посмотрим в браузер, то происходит следующее. Мы видим наш console.log, но только на доли секунды. Это происходит потому, что html по умолчанию отправляет форму и перезагружает при этом страницу.

Нам в javascript, это совсем не нужно. Для этого существует метод preventDefault. То есть он запрещает поведение по умолчанию. В функции, которая срабатывает у нас при submit, первым параметром нам приходит event. На нем то нам и нужно вызвать eventPreventDefault.

form.addEventListener('submit', function (event) {
  event.preventDefault()
  console.log('clicked on validate')
})

Если мы посмотрим сейчас, то у нас срабатывает submit и выводится console.log.

Теперь для начала давайте прочитаем значения всех полей при валидации формы.

Начнем в from

var form = document. querySelector('.formWithValidation')
var validateBtn = form.querySelector('.validateBtn')
var from = form.querySelector('.from')
form.addEventListener('submit', function (event) {
  event.preventDefault()
  console.log('clicked on validate')
  console.log('from: ', from.value)
})

Если мы посмотрим в браузер, у нас вывелось текущее значение поля from. То же самое сделаем с всеми полями.

var form = document.querySelector('.formWithValidation')
var validateBtn = form.querySelector('.validateBtn')
var from = form.querySelector('.from')
var password = form.querySelector('.password')
var passwordConfirmation = form.querySelector('.passwordConfirmation')
var passwordConfirmation = form.querySelector('.passwordConfirmation')
var where = form.querySelector('.where')
var message = form.querySelector('.message')
form.addEventListener('submit', function (event) {
  event.preventDefault()
  console.log('clicked on validate')
  console.log('from: ', from.value)
  console.log('password: ', password. value)
  console.log('passwordConfirmation: ', passwordConfirmation.value)
  console.log('where: ', where.value)
  console.log('message: ', message.value)
})

Теперь мы хотим проверить, что все поля у нас заполнены. Мы бы могли написать кучу if условий в стиле

if (!from.value) {
  // show from error
}
if (!password.value) {
  // show passoword error
}

Но это огромное количество кода, которое мы можем упростить. Мы можем пройтить по всем елементам, которые у нас есть и проверить пустой или нет. Для того, чтобы это сделать давайте добавим на каждый елемент формы одинаковый класс. например field.

Например

<input type='text' />

Теперь мы можем найти все елементы сразу и пройти по ним циклом, чтобы проверить заполнено ли поле.

var fields = form.querySelectorAll('.field')
form.addEventListener('submit', function (event) {
  event.preventDefault()
  for (var i = 0; i < fields.length; i++) {
    if (!fields[i].value) {
      console. log('field is blank', fields[i])
    }
  }
})

Если мы посмотрим в браузер, то нам в консоль вывелись ошибки. И теперь хотелось бы вывести эти ошибки на форму. Мы можем сгенерировать новый елемент и добавим к каждому полю, которое не заполнено.

Давайте создадим новые елемент. Добавим еще красный цвет и текст Cannot be blank. Теперь, чтобы вставить его перед нашими полями используем insertBefore. А так как нам нужно указать парента, то используем .parentElement.

for (var i = 0; i < fields.length; i++) {
  if (!fields[i].value) {
    console.log('field is blank', fields[i])
    var error = document.createElement('div')
    error.className='error'
    error.style.color = 'red'
    error.innerHTML = 'Cannot be blank'
    form[i].parentElement.insertBefore(error, fields[i])
  }
}

Если мы посмотрим в браузер, то у нас вывелась валидация всех полей.

Но если мы нажмем еще раз validate, то все наши сообщения сдублируются. Самый простой способ этого избежать, это удалять все ошибки с страницы при валидации.

form.addEventListener('submit', function (event) {
  event.preventDefault()
  var errors = form.querySelectorAll('.error')
  for (var i = 0; i < errors.length; i++) {
    errors[i].remove()
  }
  for (var i = 0; i < fields.length; i++) {
    if (!fields[i].value) {
      console.log('field is blank', fields[i])
      var error = document.createElement('div')
      error.className = 'error'
      error.style.color = 'red'
      error.innerHTML = 'Cannot be blank'
      form[i].parentElement.insertBefore(error, fields[i])
    }
  }
})

Если мы посмотрим в браузер, то ошибки перестали дублироваться.

Теперь давайте добавим проверку на ошибку, когда у нас не совпадают пароли. Просто напишем условие, что пароли не совпадают, а внутри создадим новый error и добавим перед паролем.

form.addEventListener('submit', function (event) {
  event.preventDefault()
  var errors = form.querySelectorAll('.error')
  for (var i = 0; i < errors.length; i++) {
    errors[i]. remove()
  }
  for (var i = 0; i < fields.length; i++) {
    if (!fields[i].value) {
      console.log('field is blank', fields[i])
      var error = document.createElement('div')
      error.className = 'error'
      error.style.color = 'red'
      error.innerHTML = 'Cannot be blank'
      form[i].parentElement.insertBefore(error, fields[i])
    }
  }
  if (password.value !== passwordConfirmation.value) {
    console.log('not equals')
    var error = document.createElement('div')
    error.className = 'error'
    error.style.color = 'red'
    error.innerHTML = 'Passwords doesnt match'
    password.parentElement.insertBefore(error, password)
  }
})

Если мы посмотрим в браузер, то когда пароли разные, у нас выводится ошибка.

Теперь хотелось бы сделать этот код понятнее, так как у сейчас его сложно читать и поддерживать. Давайте для начала создадим функцию, которая будет принимать на вход строку и возвращать DOM елемент.

var generateError = function (text) {
  var error = document. createElement('div')
  error.className = 'error'
  error.style.color = 'red'
  error.innerHTML = text
  return error
}

И теперь мы можем убрать повторяющийся код

form.addEventListener('submit', function (event) {
  event.preventDefault()
  var errors = form.querySelectorAll('.error')
  for (var i = 0; i < errors.length; i++) {
    errors[i].remove()
  }
  for (var i = 0; i < fields.length; i++) {
    if (!fields[i].value) {
      console.log('field is blank', fields[i])
      var error = generateError('Cant be blank')
      form[i].parentElement.insertBefore(error, fields[i])
    }
  }
  if (password.value !== passwordConfirmation.value) {
    console.log('not equals')
    var error = generateError('Password doesnt match')
    password.parentElement.insertBefore(error, password)
  }
})

Теперь давайте вынесем в отдельную функцию очистку ошибок.

var removeValidation = function () {
  var errors = form.querySelectorAll('.error')
  for (var i = 0; i < errors. length; i++) {
    errors[i].remove()
  }
}

И вызовем ее

form.addEventListener('submit', function (event) {
  event.preventDefault()
  removeValidation()
  for (var i = 0; i < fields.length; i++) {
    if (!fields[i].value) {
      console.log('field is blank', fields[i])
      var error = generateError('Cant be blank')
      form[i].parentElement.insertBefore(error, fields[i])
    }
  }
  if (password.value !== passwordConfirmation.value) {
    console.log('not equals')
    var error = generateError('Password doesnt match')
    password.parentElement.insertBefore(error, password)
  }
})

И вынесем проверку полей на пустоту

var checkFieldsPresence = function () {
  for (var i = 0; i < fields.length; i++) {
    if (!fields[i].value) {
      console.log('field is blank', fields[i])
      var error = generateError('Cant be blank')
      form[i].parentElement.insertBefore(error, fields[i])
    }
  }
}

И вызовем ее

form.addEventListener('submit', function (event) {
  event. preventDefault()
  removeValidation()
  checkFieldsPresence()
  if (password.value !== passwordConfirmation.value) {
    console.log('not equals')
    var error = generateError('Password doesnt match')
    password.parentElement.insertBefore(error, password)
  }
})

И вынесем валидацию пароля

var checkPasswordMatch = function () {
  if (password.value !== passwordConfirmation.value) {
    console.log('not equals')
    var error = generateError('Password doesnt match')
    console.log(error)
    password.parentElement.insertBefore(error, password)
  }
}

Вот теперь наш код намного проще читать

form.addEventListener('submit', function (event) {
  event.preventDefault()
  removeValidation()
  checkFieldsPresence()
  checkPasswordMatch()
})

Итак в этом уроке мы с вами научились валидировать формы на javascript.

Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

ключевых событий ВКонтакте | Страница 2

Джей7
Известный член