怎样设计网站建设,为什么网站显示正在建设,劳务公司网站建设,平面设计专用网站最近#xff0c;项目中需要#xff0c;在输入框获取焦点是动态显示“”图标。即在输入框中输入内容时#xff0c;右边显示“”按钮#xff1b;输入框为空时#xff0c;“”按钮消失。难点在于获取焦点的同时#xff0c;获取输入内容。
注意#xff1a;本例子的样式基于…最近项目中需要在输入框获取焦点是动态显示“×”图标。即在输入框中输入内容时右边显示“×”按钮输入框为空时“×”按钮消失。难点在于获取焦点的同时获取输入内容。
注意本例子的样式基于bootstrap.css和jquery不再单独添加样式。
1.html部分将button和input框放入同一个div中清除按钮可以使用图片或fonts图标我使用的是bootstrap中button样式具体位置可自行微调
div styledisplay:inline-block;position:relative; div styleposition:absolute;right:2px;top:-2px;cursor:pointer;display:none; classinput_clearbutton typebutton classclose data-dismissmodal aria-hiddentrue×/button/div input typetext placeholder请输入 classinput-text w200 form-control aria-describedbybasic-addon1 namekeyword idkeyword styleheight:35px; /div
注button外的div样式为input_clear样式。 2.jquery代码
script$(input).focus(function(){ $(this).parent().children(.input_clear).show();
});
$(input).blur(function(){ if($(this).val()) { $(this).parent().children(.input_clear).hide(); }
});
$(.input_clear).click(function(){ $(this).parent().find(input).val(); $(this).hide();
}); /script
3.图1和图2分别为输入框效果图和点击输入框效果后
