匹配改写input值并自动添加前后缀

很意外我居然连续两天没有文荒哈哈哈哈哈
这JS可以用来为访客自动填写邮箱:比如你填了一个http://xiaohudie.net,然后邮箱输入框会自动写好admin@xiaohudie.net
以这段html为例:

<input type="text" name="url" id="url" >网址
<input type="text" name="email" id="email" >邮箱

JS

  1. 首先定义一个需要拿值的input
  2. function xhd(ooo){}

    给需要拿值的input加入onkeyup="xhd(this)"属性,让它变成ooo,也可以直接改写id,这个就比较多样了

  3. 然后是改写此input的value并传入另一个input
  4. document.getElementById("xxx").value= ooo.value.replace('http://', '')
    //把脱掉'http://'的ooo值写入xxx
  5. 添加前后缀
  6. 以网址转邮箱为例,我们需要添加的是XXX@这样的前缀,一般以admin开头居多,所以这里用admin

    document.getElementById("email").value='admin@'+document.getElementById("xxx").value;
    //添加'admin@'前缀并写入email输入框

完整代码

<script>
function xhd(ooo){
document.getElementById("xxx").value= ooo.value.replace('http://', '')
document.getElementById("email").value='admin@'+document.getElementById("xxx").value;
}
</script>
<input onkeyup="xhd(this)" type="text" name="url" id="url" >网址
<input id="xxx" type="hidden" />
<input type="text" name="email" id="email" >邮箱

演示如下:

网址
邮箱

改进版:JS替换多个字符串(对上一篇的改进)

LIKE OR SHARE IT:

admin发表于Code目录下,标签为,转载请保留链接

TOP DOWN
发表评论

您必须 [ 登录 ] 才能发表留言!

  1. 沙 发 SEO博客

    沙发 :v5:

    四月 21, 2013 16:57:35
  2. 板 凳 ChoJemmy

    板凳吧

    四月 21, 2013 17:11:15
  3. 地 板 Tokin

    不能加www…有点坑 :fue:

    四月 21, 2013 17:42:50
  4. 地 毯 Tokin

    第一次距离楼主那么近。。。 :er:

    四月 21, 2013 17:43:17
  5. 地 面 Tokin

    要不要再来一发。。。 :koubixiu:

    四月 21, 2013 17:43:42
  6. 地 下 夜枫

    见见流血了…. :fue: :huai:

    四月 21, 2013 17:45:37
  7. 7 楼 DruidFY

    首次进入前十的行列

    四月 21, 2013 18:08:33
  8. 8 楼 yxiao

    用处不是很大。 :koubi:

    四月 21, 2013 18:40:36
  9. 9 楼 张书杨

    可以再增加类似邮箱登录,各个提供商的后缀,这样输入会更加的方便快捷。用的较多的如:@gmail,@163.com,@126.com,@qq.com等等

    四月 21, 2013 21:25:17
  10. 10 楼 大发

    我觉得你是压力太大了

    四月 21, 2013 23:03:01
  11. 11 楼 胡倡萌

    测试了一下,但是如果有人填写的链接是带www的,邮箱的后缀就包含www了。或者如果是https:链接,那就又有问题了,所以所以,加些判断吧 :huai:

    四月 22, 2013 11:44:59
  12. 12 楼 我的名字叫麒

    不懂,友情顶帖!

    四月 22, 2013 14:10:23
  13. 13 楼 Mike

    好棒的东东~

    四月 22, 2013 17:43:46
  14. 14 楼 Cnjoel博客

    太专业了 只能路过···········

    四月 26, 2013 09:30:16
  15. 15 楼 Rilun

    感觉用处不大,还不如增加一个域名后缀选择呢 在或者是自动填充http://什么的

    五月 4, 2013 18:12:56