根据另一个输入值更改输入值

希望标题有意义。我是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

根据另一个输入值更改输入值

回答

相关问题