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 相关文章推荐
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
Jul 20 Javascript
antd配置config-overrides.js文件的操作
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 变量未定义等错误的解决方法
2011/01/12 PHP
php下获取http状态的实现代码
2014/05/09 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
php分页查询的简单实现代码
2017/03/14 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
js将控件隐藏及display属性的使用介绍
2013/12/30 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Django开发中复选框用法示例
2018/03/20 Python
python format 格式化输出方法
2018/07/16 Python
Numpy之random函数使用学习
2019/01/29 Python
Python画图高斯分布的示例
2019/07/10 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
房产公证书格式
2015/01/26 职场文书
换届选举主持词
2015/07/03 职场文书
关于公司年会的开幕词
2016/03/04 职场文书