テキストフィールドでのぼかしの使用

Question

2つの入力テキストフィールドがあります。 1つは記事のタイトルを入力するためのもので、もう1つは記事のパーマリンクのためのものです。私がしたいのは、テキストがタイトルフィールドに挿入されるまでパーマリンクフィールドを無効にして、ユーザーがタイトルフィールドからフォーカスを外したときにスペースをハイフンに置き換え、大文字を小文字にするカスタム正規表現を実行することです。

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

Answer 1

それは...

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のと本当簡単です。

あなたは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*プロパティを割り当てることです。これにより、そこに割り当てられた以前のプロパティが上書きされます。

古代のブラウザで複数のイベントを登録したい場合は、必要に応じて複数のイベントを登録してトリガしたカスタムハンドラを使用するようにプロパティの割り当てを変更します。