2

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

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

1 に答える 1

6

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

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

于 2012-04-14T13:17:02.640 に答える