Изменить входное значение на основе другого входного значения

Question

надеюсь, что название имеет смысл.Я нуб в JavaScript.То, что я хочу сделать, это иметь форму, которая будет иметь несколько входов, таких как, например, имя и URL.

Когда пользователь вводит свое имя, я бы хотел, чтобы при вводе URL по умолчанию автоматически использовалось его имя с подчеркиванием между словами.Так что, если они введут в качестве своего имени pedro kinkybottom, то в качестве значения по умолчанию для ввода URL будет автоматически установлено значение pedro_kinkybottom.

Я использую cakephp, если кто-нибудь узнает, что для этого нужен очень приятный способ:будь крут, но в противном случае любая помощь будет приветствоваться.

Спасибо,

Педро

Answer 1

Возможно, вы захотите сделать это на JavaScript, а не на PHP.Даже если вы более знакомы с последним, пользовательский интерфейс будет лучше с первым, а общий дизайн будет проще (поскольку странице не нужно будет обновлять).

По сути, вам нужно сделать две вещи:

1. Установить значение входа в ответ на событие на другом входе.
2. Заменить пробел символами подчеркивания.

Для второгоЧасть, взгляните на функцию JavaScript replace в JavaScript.Это довольно надежно и позволяет вам много манипулировать строками.Определенно стоит попробовать сами.

Для первой части, вот пример с jQuery :

$('#inputName').change(function() {
  $('#inputURL').val($('#inputName').val());
});

Это установит значение inputURL взначение inputName в любое время, когда значение inputName изменяется.Для замены строки вы должны изменить ее следующим образом:

$('#inputName').change(function() {
  $('#inputURL').val($('#inputName').val().replace(' ', '_'));
});

Обратите внимание, что событие change будет запущено, когда элемент управления потеряет фокус.Если вы хотите, чтобы это происходило по типу ввода, попробуйте событие keyup.Также есть других событий .

Answer 2

Добавьте событие keyup в поле имени, которое обновит поле URL:

<form>
    <input type="text" id="name" />
    <input type="text" id="url" />
</form>

... и JS:

addEvent(document.getElementById('name'), 'keyup', function () {
   document.getElementById('url').value = this.value.replace(' ', '_');
});


function addEvent(ele, evnt, funct) {
  if (ele.addEventListener) // W3C
    return ele.addEventListener(evnt,funct,false);
  else if (ele.attachEvent)  // IE
    return ele.attachEvent("on"+evnt,funct);
}

http://jsfiddle.net/XKEh5/

Если вы собираетесь делать какие-то тривиальные вещи, подобные этой, то все будет в порядке с простым старым javascript. Если вы собираетесь делать много такого рода вещей, а также какие-либо эффекты, такие как затухание элементов или еще много чего, я предлагаю вам взглянуть на mootools или jQuery .

Answer 3

Вот отредактированная версия вышеуказанного ответа. Была проблема с "value.replace(' ', '_');", когда он занимал только пробел между первыми двумя набранными словами. Этот фрагмент кода ниже делает это для всех.

<script language="javascript" type="text/javascript">

addEvent(document.getElementById('name'), 'keyup', function () {    
   document.getElementById('url').value = this.value.split(' ').join('');    
});    

function addEvent(ele, evnt, funct) {

  if (ele.addEventListener) // W3C    
    return ele.addEventListener(evnt,funct,false);

  else if (ele.attachEvent)  // IE    
    return ele.attachEvent("on"+evnt,funct);

}

</script>