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

Question

希望标题有意义。 我是javascript的菜鸟。 我想要做的是有一个表单，其中包含一些输入，例如name和url。

当用户输入他们的名字时，我希望网址输入自动默认他们的名字，并在单词之间加下划线。 因此，如果他们输入他们的名字pedro kinkybottom然后自动设置为url输入中的默认值将是pedro_kinkybottom。

我正在使用cakephp，如果有人碰巧知道一种特别的蛋糕方式来做这个很酷但是否则任何帮助都会非常受欢迎。

谢谢，

佩德罗

Answer 1

将keyup事件添加到将更新url字段的name字段：

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

您可能希望在JavaScript中而不是在PHP中执行此操作。 即使您可能对后者更熟悉，但使用前者和整体设计的用户体验会更好（因为页面不需要刷新）。

你基本上需要做两件事：

1. 设置输入的值以响应另一个输入上的事件。
2. 用下划线字符替换空格字符。

对于第二部分，请看一下JavaScript的替换函数。 它非常强大，可以让你进行大量的字符串操作。 绝对值得自己尝试一下。

对于第一部分，这是jQuery的一个例子：

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

这将值设置inputURL到的值inputName任何时刻的价值inputName变化。 对于字符串替换，您将修改它，类似于：

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

请注意，当控件失去焦点时，将触发change事件。 如果您希望按类型发生，请尝试使用keyup事件。 还有其他活动 。

Answer 3

以下是上述答案的编辑版本。 "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>