Maison > Article > interface Web > js pour sélectionner automatiquement le contenu lorsque vous cliquez avec la souris sur une zone de texte_javascript skills

js pour sélectionner automatiquement le contenu lorsque vous cliquez avec la souris sur une zone de texte_javascript skills

WBOYoriginal: 2016-05-16 15:43:541927parcourir

L'exemple de cet article décrit comment utiliser js pour sélectionner automatiquement du contenu en cliquant avec la souris sur une zone de texte. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

JS est utilisé ici pour sélectionner automatiquement le texte dans la zone de texte lorsque vous cliquez sur la souris. Je pense que de nombreux amis ont rencontré cette fonction lorsque nous cliquons sur la zone de texte, tout le texte par défaut dans la zone de texte sera sélectionné. , vous n'avez donc pas à faire de sélection lors de la saisie, ce qui vous évite des problèmes et améliore l'efficacité de la saisie. Les utilisateurs apprécieront certainement cette fonction. Alors, quelle est la méthode d'implémentation ? Vous le comprendrez à travers ce code.

Jetons un coup d'œil aux captures d'écran de l'effet de course :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

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

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jQuery HTML5 implémente l'effet d'aperçu de l'image avant de télécharger_jqueryArticle suivant：jQuery HTML5 implémente l'effet d'aperçu de l'image avant de télécharger_jquery

Articles Liés

Voir plus