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 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
Sep 17 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文件下载类
2006/12/06 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
js比较日期大小的方法
2015/05/12 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python实现识别相似图片小结
2016/02/22 Python
python 读写中文json的实例详解
2017/10/29 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
python随机数分布random测试
2018/08/27 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
Python面向对象之Web静态服务器
2019/09/03 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
do you have any Best Practice for testing
2016/06/04 面试题
城市规划应届毕业生自荐信
2014/07/04 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
css实现左上角飘带效果的完整代码
2022/03/18 HTML / CSS