Javascript 根据另一个输入更改输入值'；s值

希望这个标题有意义。我对javascript很在行。我想做的是有一个表单，它将有一些输入，比如，名称和url

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

我正在使用cakephp，如果有人碰巧知道一种特别的cakey方法来实现这一点，那将是很酷的，但如果没有，任何帮助都将是最受欢迎的

谢谢

---

Pedro

向名称字段添加一个键控事件，该事件将更新url字段：

<form>
    <input type="text" id="name" />
    <input type="text" id="url" />
</form>

---

如果您只想做一些像这样的琐碎事情，那么您可以使用简单的老javascript。如果你要做很多类似的事情，加上像淡出元素之类的效果，我建议你看看或。

你可能想用JavaScript而不是PHP来做这件事。尽管您可能更熟悉后者，但前者的用户体验更好，总体设计更简单（因为页面不需要刷新）

您基本上需要做两件事：

设置一个输入的值，以响应另一个输入上的事件

将空格字符替换为下划线字符

对于第二部分，看一看JavaScript的函数。它非常健壮，允许您执行大量字符串操作。绝对值得你自己尝试一下

对于第一部分，以下是一个示例：

这将在

inputName

的值更改时，将

inputnurl

的值设置为

inputName

的值。对于字符串替换，您将对其进行如下修改：

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

---

请注意，

change

事件将在控件失去焦点时触发。如果希望在键入时发生，请尝试

keyup

事件。还有。

这里是上述答案的编辑版本。

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

addEvent（document.getElementById（'name'），'keyup'，函数（）{
document.getElementById（'url'）.value=this.value.split（''）.join（''）；
});    
函数加法器（ele、evnt、funct）{
if（ele.addEventListener）//W3C
返回ele.addEventListener（evnt、funct、false）；
else if（ele.attachEvent）//IE
返回元素附件（“on”+evnt，funct）；
}

为什么要寻找PHP解决方案，这可以通过javascript轻松实现+佩德罗·金基巴顿先生和萨米·香肠先生的独特名字……嘿，谢谢你的回答。看来我晚饭后有点看书了！谢谢：）@sammy香肠：没问题，祝你发展顺利。就我个人而言，在我的职业生涯中，JavaScript开发比任何其他技术都更让我享受：）嗨，为你的回答干杯。我已经听说了很多关于jquery的事情，所以迪福会进行更彻底的调查。。。。不要以为你可以把jQuery放在你的项目上，然后像鹰一样翱翔。我认为在开始使用框架之前学习一点基本的javascript是非常重要的。祝你好运！

$('#inputName').change(function() {
  $('#inputURL').val($('#inputName').val().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>