Question

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

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

我正在使用cakephp，如果有人碰巧知道一种特别美味的方式来做这件事，那会很酷但是否则任何帮助都会受到欢迎。

谢谢，

佩德罗

Answer 1

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

Answer 2

您可能希望在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。

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>

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

3 个答案: