js实现鼠标点击文本框自动选中内容的方法


Posted in Javascript onAugust 20, 2015

本文实例讲述了js实现鼠标点击文本框自动选中内容的方法。分享给大家供大家参考。具体如下:

这里使用JS实现鼠标点击时自动选中文本框文本的效果,相信许多朋友都遇到这种功能的,就是当我们点击文本框的时候,文本框中默认的文字会被全部选中,这样当你输入的时候不用再去选择,省去了一些麻烦,提高了输入效率,用户肯定会喜欢这功能,那么实现的方法是怎么样呢?通过本代码你就搞明白了。

先来看看运行效果截图:

js实现鼠标点击文本框自动选中内容的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自动选择文本框/编辑框中的文字</title>
<script type="text/javascript">
function Myselect_txt(){
 if (document.form1.title.focus){
 document.form1.title.select();}
}
function Myselect_txtarea(){
 if (document.form1.content.focus){
 document.form1.content.select();}
}
</script>
</head>
<body style="font-size:12px">
<table width="443" height="97" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f9f9f9">
 <form name="form1">
 <tr bgcolor="#214994">
  <td height="25" colspan="2"><div align="center"><font color="#FFFFFF">新闻信息修改</font></div></td>
 </tr>
 <tr>
  <td width="80" height="28"><div align="right"><font color="#214994">新闻标题:</font></div></td>
  <td width="363"><input name="title" type="text" size="50" value="今日新闻头条" onClick="Myselect_txt()"></td>
 </tr>
 <tr>
  <td height="20"><div align="right"><font color="#214994">新闻内容:</font></div></td>
  <td rowspan="2"><textarea name="content" cols="50" rows="6" onClick="Myselect_txtarea()">今日,据相关方面报道,...</textarea></td>
 </tr>
 <tr>
  <td height="10"> </td>
 </tr>
 <tr>
  <td height="32" colspan="2">
  <div align="center">
   <input name="add" type="submit" id="add" value="添加">
 
   <input name="Submit" type="reset" value="重置">
  </div></td>
 </tr>
 </form>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
Jun 25 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
有关Promises异步问题详解
Nov 13 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
Highcharts入门之简介
Aug 02 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
vue权限管理系统的实现代码
Jan 17 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
js实现文字在按钮上滚动的方法
Aug 20 #Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 #Javascript
js实现网页多级级联菜单代码
Aug 20 #Javascript
javascript常用的方法整理
Aug 20 #Javascript
JS实现的Select三级下拉菜单代码
Aug 20 #Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 #Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 #Javascript
You might like
PHP中文竖排转换实现方法
2015/10/23 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
python 多线程共享全局变量的优劣
2020/09/24 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
大学生作弊检讨书
2014/02/19 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
婚礼迎宾词大全
2015/08/10 职场文书
创业计划书之养殖业
2019/10/11 职场文书
正确使用MySQL update语句
2021/05/26 MySQL
Java完整实现记事本代码
2022/06/16 Java/Android
windows系统安装配置nginx环境
2022/06/28 Servers