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

Question

我想要一个有几个输入的表单，例如:名称和 url。

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

我正在使用 cakephp，如果有人碰巧知道一个特别 cakey 的方法来做到这一点，那会很酷，但除此之外，任何帮助都是最受欢迎的。

Answer 1

您可能希望在 JavaScript 而不是 PHP 中执行此操作。尽管您可能更熟悉后者，但前者的用户体验会更好，整体设计也会更简单(因为页面不需要刷新)。

您基本上需要做两件事:

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

第二部分，看看JavaScript的replace功能。它非常健壮，可以让您进行大量的字符串操作。绝对值得您亲自尝试一下。

对于第一部分，这里有一个 jQuery 的例子:

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

每当 inputName 的值发生变化时，这会将 inputURL 的值设置为 inputName 的值。对于字符串替换，您可以像这样修改它:

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

请注意，当控件失去焦点时，将触发 change 事件。如果您想在键入时发生，请尝试 keyup 事件。有other events