根據另一個輸入值更改輸入值

希望標題有意義。我是javascript的noob。我想要做的是有一個表單，它會有幾個輸入，例如名稱和URL。根據另一個輸入值更改輸入值

當用戶輸入他們的名字時，我想讓url輸入自動將默認名稱與單詞之間的下劃線一起使用。所以如果他們輸入他們的名字pedro kinkybottom然後自動設置爲URL輸入默認爲pedro_kinkybottom。

我正在使用cakephp，如果有人碰巧知道一個特別的方法來做到這一點很酷，但否則任何幫助都將是最受歡迎的。

感謝，

佩德羅

來源

2011-09-16 sammy sausage

爲什麼要尋找PHP解決方案，這可以用javascript輕鬆完成！ – SpeedBirdNine

+1獨特的名字佩德羅Kinkybottom先生和薩米香腸... – Jakub

你可能想用JavaScript而不用PHP。即使你可能更熟悉後者，用戶體驗對前者更好，整體設計也更簡單（因爲頁面不需要刷新）。

你基本上需要做兩件事情：

設置的輸入值響應另一個輸入事件。
用下劃線字符替換空格字符。

對於第二部分，請看看JavaScript的replace函數。它非常強大，可以讓你做很多字符串操作。絕對值得自己嘗試一下。

在第一部分，這裏是一個例子與jQuery：

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

這的inputURL價值的任何時間設置爲inputName價值inputName變化值。對於字符串替換，你會修改它與此類似：

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

注意，當控件失去焦點的事件change將被解僱。如果你想要按照你的方式發生，那麼嘗試一下keyup事件。還有other events。

來源

2011-09-16 17:40:28 David

嘿謝謝你的答案。看起來我晚飯後有點讀書了！謝謝:) –

@sammy香腸：沒問題，祝你的開發工作順利。就我個人而言，我喜歡JavaScript開發，比我職業生涯中的其他任何技術都多:) – David

添加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。

來源

2011-09-16 17:34:59

嗨，歡呼的答覆。我已經聽說了很多關於jquery的知識，因此defo會進行更徹底的調查。 –

...不明白你可以在你的項目中放置jQuery並像老鷹一樣翱翔。我認爲在開始使用框架之前學習一些基本的JavaScript是非常重要的。祝你好運！ –

這是上述答案的編輯版本。 "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>

來源

2013-04-26 17:59:49 user2324912

根據另一個輸入值更改輸入值

回答

相關問題