別の入力の値に基づいて入力値を変更してください。

Question

タイトルが意味を成就することを願っています。私はジャバスクリプトの騒ぎです。私がしたいのは、名前とURLのような入力が2つあるフォームを持つことです。

ユーザーが名前を入力すると、単語の下線付きの名前が自動的にデフォルトとして自動的に入力されます。したがって、彼らが名前のペドロkinkybottomとして入力すると、自動的にurlの入力にデフォルトとして設定され、pedro_kinkybottomになります。

私はcakephpを使用しています。誰かがこれを行うために特にケーキな方法を知っている場合、クールですが、そうでなければどんなヘルプでも大歓迎です。

おかげで、

ペドロ

Answer 1

おそらく、これはJavaScriptではなくPHPで行いたいと思うでしょう。あなたが後者に慣れていても、前者と全体的なデザインは簡単です（ページをリフレッシュする必要がないため）。

あなたは基本的に2つのことを行う必要があります

1. 別の入力上のイベントに応答して、入力の値を設定します。
2. スペース文字をアンダースコアに置き換えます。

2番目の部分については、JavaScriptのreplace関数を見てください。かなり堅牢で、たくさんの文字列を操作できます。間違いなくあなた自身で試してみる価値がある。最初の部分については

は、ここにjQueryとの例を示します

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

これは、任意の時間にinputNameの値にinputName変化の値をinputURLの値を設定します。文字列置換のために、あなたはこれに似て、それを修正したい：コントロールがフォーカスを失ったときにchangeイベントが発生されることを

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

注意を。あなたがあなたのような形で起こりたいのであれば、keyupイベントを試してみてください。 other eventsもあります。

Answer 2

は、URLフィールドを更新します名前フィールドにkeyUpイベントを追加します。

<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(' ', '_');"に問題があり、入力された最初の2つの単語の間にスペースがあります。以下のコードスニペットはすべてのためにそれを行います。

<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>