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 相关文章推荐
javascript数组的使用
Mar 28 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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服务器实现多session并发运行
2006/10/09 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
php实现微信企业转账功能
2018/10/02 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
js获取内联样式的方法
2015/01/27 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
javascript实现计算器功能
2020/03/30 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python爬虫常用的模块分析
2014/08/29 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
毕业生简单求职信
2013/11/19 职场文书
电子银行营销方案
2014/02/22 职场文书
战略合作意向书范本
2014/04/01 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
运动与健康自我评价
2015/03/09 职场文书
初中政教处工作总结
2015/08/12 职场文书
行为规范主题班会
2015/08/13 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书