如何在输入框前面定死一个"http://"

原创于 2018-04-26 21:28:30 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的输入框样式联动效果。当右侧输入框获得或失去焦点时，左侧不可编辑输入框的边框颜色会发生变化。该效果适用于需要展示链接或其他组合输入场景的前端应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置两个input输入框,把它们拼接到一起去掉中间的边框,左边的边框定死了内容并且设置成无法更改,右输入框输入,设置成右输入框获取或者失去焦点时左输入框的边框颜色发生改变就行

$("#advLinkShow").val("http://");

$("#advLink").focus(function(){

$("#advLinkShow").css({ "border-color": "#1E66BD" });
//$("#advLink").css({ "outline": "none" });
});
$("#advLink").blur(function(){
$("#advLinkShow").css({ "border-color":"#C7CFD9"});
});
$("#advLinkShow").focus(function(){
$("#advLink").focus();
});