第一个输入框中输入 test，第二个输入框中自动出现 test.baibu.com

如何在JS中根据输入生成特定格式的URL

最新推荐文章于 2022-05-13 10:28:05 发布

转载最新推荐文章于 2022-05-13 10:28:05 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xiaoxiao2014/p/3700706.html

文章标签：

#php #xhtml #javascript #ViewUI

本文详细介绍了在JavaScript中，通过监听文本框输入并动态生成URL的方法，利用jQuery简化了操作过程。重点展示了如何在用户输入文本后，自动在另一个文本框中显示对应的URL格式。

在js 方面，我总是欠缺的。知识有待学习。

朋友替的问题（）

有两个文本框，我想在第一个文本框中输入 test 的时候，第二个文本框会根据第一个文本框中的内容生成 test.baidu.com ,,,如果我输入的是
test2 ，第二个文本框的内容自动生成 test2.baidu.com 。怎么实现啊？

解答：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../js/lhgdialog/jquery-1.7.1.min.js"></script>
</head>

<body>
<input type="text" id='one'/>
<input type="text" id="two" />
</body>
<script>
$(function(){            
        $("#one").keyup(function(){
            $("#two").val($("#one").val()+".baidu.com");                    
        })                    
})
</script>
</html>

jQuery 中用 .change() 也可以。但是，在你输入完成之后，点击第二个输入框的时候，会出现结果。

<script>
$(function(){            
        $("#one").change(function(){
            $("#two").val($("#one").val()+".baidu.com");                    
        })                    
})
</script>