Использование размытия с текстовыми полями

Question

У меня есть два поля ввода текста. Один из них заключается в том, чтобы ввести заголовок статьи, а другой - для ссылки на статью. Я хочу, чтобы поле permalink было отключено до тех пор, пока текст не будет вставлен в поле заголовка, и когда пользователь выберет фокус из поля заголовка, тогда он запустит пользовательское регулярное выражение, чтобы заменить пробелы дефисом, а нижние - заглавные буквы.

<input type="text" id="title" name"title" /> 
<input type="text" id="permalink" name="permalink" /> 

Answer 1

Это реально легко с JQuery ...

var permalinkInput = $('#permalink'); 

$('#title').change(function() { 
    permalinkInput.prop('disabled', !$(this).val()); 
}).change().blur(function() { 
    $(this).val(function(i, value) { 
     return value.replace(/\s+/g, '-').toLowerCase(); 
    }); 
});​ 

jsFiddle.

Если у вас нет JQuery, но нужно только поддерживать совместимые со стандартами современных браузеров, было бы ...

var permalinkInput = document.querySelector('#permalink'), 
    titleInput = document.querySelector('#title'); 

permalinkInput.disabled = true; 

titleInput.addEventListener('change', function() { 
    permalinkInput.disabled = !titleInput.value; 
}, false); 

titleInput.addEventListener('blur', function() { 
    titleInput.value = titleInput.value.replace(/\s+/g, '-').toLowerCase(); 
});​ 

jsFiddle.

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

var permalinkInput = document.getElementById('permalink'), 
    titleInput = document.getElementById('title'); 

var addEvent = function(element, type, callback) { 
    if (element.addEventListener) { 
     element.addEventListener(type, callback, false); 
    } else if (element.attachEvent) { 
     element.attachEvent('on' + type, callback); 
    } else { 
     element['on' + type] = callback; 
    } 
} 

permalinkInput.disabled = true; 

addEvent(titleInput, 'change', function() { 
    permalinkInput.disabled = !titleInput.value; 
}); 

addEvent(titleInput, 'blur', function() { 
    titleInput.value = titleInput.value.replace(/\s+/g, '-').toLowerCase(); 
});​ 

jsFiddle.

Обратите внимание, что старый резерв для регистрации события должен присвоить имущество on*. Это перезапишет любое предыдущее свойство, назначенное там.

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