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 相关文章推荐
用于table内容排序
Jul 21 Javascript
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
javascript canvas封装动态时钟
Sep 30 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&amp;java(一)
2006/10/09 PHP
完美解决:Apache启动问题―(OS 10022)提供了一个无效的参数
2013/06/08 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP pear安装配置教程
2016/05/14 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
利用js获取服务器时间的两个简单方法
2010/01/08 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
跟老齐学Python之折腾一下目录
2014/10/24 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
自动化专业职业生涯规划书范文
2014/01/16 职场文书
幼教求职信
2014/03/12 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
Python包argparse模块常用方法
2021/06/04 Python