Home >Web Front-end >JS Tutorial >js method to automatically select content when clicking the mouse on a text box_javascript skills

js method to automatically select content when clicking the mouse on a text box_javascript skills

WBOYOriginal: 2016-05-16 15:43:541996browse

The example in this article describes how to use js to automatically select content by clicking the mouse on a text box. Share it with everyone for your reference. The details are as follows:

JS is used here to automatically select the text in the text box when the mouse is clicked. I believe many friends have encountered this function. When we click on the text box, all the default text in the text box will be selected, so You don’t have to make a selection when typing, which saves you some trouble and improves input efficiency. Users will definitely like this function. So what is the implementation method? You will understand it through this code.

Let’s take a look at the screenshots of the running effect:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-mouse-click-pitch-style-codes/

The specific code is as follows:

<!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>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery HTML5 implements image preview effect before uploading_jqueryNext article：jQuery HTML5 implements image preview effect before uploading_jquery

See more

js method to automatically select content when clicking the mouse on a text box_javascript skills

Related articles