jQuery点击文字输入搜索框 搜索

<!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/jquery.min.js"></script>
<script type="text/javascript">
function txtFocus(el) {
if (el.defaultValue == el.value) { el.value = ‘‘; el.style.color = ‘#000‘; }
}

function txtBlur(el) {
if (el.value == ‘‘) { el.value = el.defaultValue; el.style.color = ‘#666‘; }
}
</script>
<script type="text/javascript">
$(document).ready(function() {

$("[name=w]").click(function() {
$("#txtStr").val($(this).text());
$("#ss").click();
});
});
</script>
<style type="text/css">
body { font-family: "微软雅黑"; font-size: 14px; }
.conter { background-color: #fff; margin: 30px 100px 30px 100px; border: 1px solid #999; }
.wenti { letter-spacing: 5px; font-size: 16px; font-weight: bold; padding: 8px; cursor: pointer; }
.wenti:hover { background-color: #F5FFFA; color: #000; }
.huida div { display: none; background-color: #FFF8DC; letter-spacing: 2px; line-height: 20px; margin-left: 10px; margin-right: 10px; padding: 8px; font-size: 12px; }
input.text, textarea.textarea { background: #fff; color: #333; border: 1px solid #eee; border-top-color: #999; border-left-color: #999; padding: 1px; vertical-align: middle; height: 22px; line-height: 22px; }
input.button { background: #FFA54F repeat-x; padding-top: 3px; border: 1px solid #708090; width: 80px; height: 25px; font-size: 10pt; cursor: hand; }
</style>
</head>
<body style="background-color:#f6f6f6;">
<form id="form1" runat="server">
<div class="conter" >
<div class="q" >
<div style="margin:20px">
<input id="txtStr" type="text" class="text" value="输入问题的关键字" onFocus="txtFocus(this)" onBlur="txtBlur(this)" />
<input id="ss" type="button" class="button" value="搜索"/>
</div>
<div style=" margin:10px 0px 10px 20px"> 快捷标签:<a name="w" style="font-size: 12px;color:#f01; text-decoration:none; cursor:pointer" >1111</a>&nbsp;&nbsp;&nbsp; <a name="w" style="font-size: 12px;color:#f01; text-decoration:none; cursor:pointer" >三三</a>&nbsp;&nbsp;&nbsp; <a name="w" style="font-size: 12px;color:#f01; text-decoration:none; cursor:pointer" >444444</a>&nbsp;&nbsp;&nbsp; <a name="w" style="font-size: 12px;color:#f01; text-decoration:none; cursor:pointer" >自定义</a>&nbsp;&nbsp;&nbsp; </div>

</div>
</div>
</form>
</body>
</html>

时间: 2024-08-02 11:40:43

jQuery点击文字输入搜索框 搜索的相关文章

点击文字选中单选框或复选框

在选择单选框或者复选框的时候,点击圆点或者方框不太好点,就有了点击文字选中的需求,之前一直想的是用js实现,后来发现一个比较方便的方法. 就是把选项和文字外加label标签,如: <label> <input type="radio" value="A" name="1">A.选项A </label> <label> <input type="radio" value=&q

Jquery实现点击文字后变成文本框,修改发送后台保存

本文实现以下几个功能: 1.点击文字变为文本框 ,并选中文字2.对文本框内容进行修改3.点击文本框以外的地方文本框再次变为修改后的文字,如果是删除文字,显示默认提示文字4. 同步更新SQL数据库内容 首先是HTML模板部分: 1 <{if !empty($img_list)}> 2 <{foreach $img_list as $kk=>$vv}> 3 <div class="item-box radius3"> 4 <a href=&q

修改百度地图SearchInRectangle.js,去掉搜索功能,实现拖动搜索框时获得右下角坐标经纬度

var BMapLib = window.BMapLib = BMapLib || {};//var rbPoint=0;(function() { /** * BMAP_ZOOM_IN 拉框后执行放大操作 * @type {int} */ var BMAP_ZOOM_IN = 0; /** * @exports SearchInRectangle as BMapLib.SearchInRectangle */ var SearchInRectangle = /** * SearchInRect

iOS - Swift UISearchController仿微信搜索框

0x01.创建一个UISearchController 如果传入的searchController为nil,则表示搜索的结果在当前控制器中显示,现在我让它在searchVC中显示. // 创建searchResultVC let searchVC = UIViewController() // 设置背景颜色为红色 searchVC.view.backgroundColor = UIColor.red let searchController = UISearchController(search

jQuery实现TEXT文本框输入时的提示信息(谷歌百度淘宝搜索框提示实现)

在搜索框中,输入之前框内有输入的提示信息,文本框获得焦点后会自动消失的效果,效果图如下: 鼠标放在文本框时的效果: 创建工具类(已经存在就不用创建了)Util.js(DWR的JS) 在里面添加如下方法: Js代码 /** * Input框里的灰色提示,使用前先引入jquery * <br>使用方法:<input type="text" tipMsg="您的用户名"   /> * * @return */ function inputTipTe

Qt之自定义搜索框——QLineEdit里增加一个Layout,还不影响正常输入文字(好像是一种比较通吃的方法)

简述 关于搜索框,大家都经常接触.例如:浏览器搜索.Windows资源管理器搜索等. 当然,这些对于Qt实现来说毫无压力,只要思路清晰,分分钟搞定. 方案一:调用QLineEdit现有接口 void addAction(QAction * action, ActionPosition position) 在QLineEdit的前/后添加部件,ActionPosition表示部件所在方位. QAction * addAction(const QIcon & icon, ActionPosition

jQuery搜索框输入实时进行查询

在手机上,我们期望在搜索框中输入数据,能够实时更新查询出来的内容,不需要按回车. 实现方式为: $(".search").bind("input propertychange",function(event){ //进行查询操作 }) 一.首先分清下面几个概念:onchange事件:此事件会在元素内容发生改变,且失去焦点的时候触发.浏览器支持度较好.onpropertychange事件:此事件会在元素内容发生改变时立即触发,即便是通过js改变的内容也会触发此事件.元

常见26个jquery使用技巧详解(比如禁止右键点击、隐藏文本框文字等)

来自:http://www.xueit.com/js/show-6015-1.aspx 本文列出jquery一些应用小技巧,比如有禁止右键点击.隐藏搜索文本框文字.在新窗口中打开链接.检测浏览器.预加载图片.页面样式切换.所有列等高.动态控制页面字体大小.获得鼠标指针的X值Y值.验证元素是否为空.替换元素.延迟加载.验证元素是否存在于Jquery集合中.使DIV可点击.克隆对象.使元素居中.计算元素个数.使用Google主机上的Jquery类库.禁用Jquery效果.解决Jquery类库与其他J

用户界面框架jQuery EasyUI示例大全之进度栏、搜索框及表单演示

<jQuery EasyUI最新试用版免费下载> jQuery EasyUI致力于帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.jQuery EasyUI提供了基于当下流行的jQuery core和HTML5的控件,助您打造适合当今网络的应用程序. 基本的进度栏 本演示主要展示了基本的进度栏,点击按钮可以显示进度信息.[另附源代码供大家参考] |在线Demo 流体进度条 本演示主要展示了如何将进度条的宽度设置为其父容器的百分比.[另附源代码供大家参考] |在线Demo 基本的搜索框