[javascript] recuperer la valeur tabindex

Fermé
Kid - 23 avril 2007 à 15:00
 kid - 3 mai 2007 à 14:27
Bonjour à tous

Je voudrais savoir si il est possible de donner le focus à un champs par son tabindex.

Ce que j'essaye de faire :

Je recupere un groupe de mot dans un text area avec l'event onselect. à partir de la sur la même page se trouve un formulaire et je voudrais mettre la valeur recupéré par le onselect dans le champs dont une variable indique le tabindex

Autre questions : est il également possible de recupere la valeur tabindex du champs sélectionné?

jusqu'a present j'ai fait ceci mais ca ne fonctionne pas

  var field; var text; function copySelect(){ text= document.getElementById("cv").value; if (field != null){ document.getElementById(field).focus; document.getElementById(field).value = text; } }   function getFocusField(current_field){ field = current_field; } }


Lorsque je donne le focus a un champs de mon formulaire, je recupere son id avec getFocusField() avec l'event onblur
puis dans le texte qui est a cote du formulaire je selectionne un groupe de mot que je recupere avec copySelect(), je redonne le focus à l'element dont l'id est dasn l'attribut field et prend la valeur du texte selectionner.

a noter que je travaille avec des pages JSP et le framework Struts. dans le taglibs html:text, le champs id n'est pas connu. mais il ya property, name et title (en d'autre)

Merci à tous pour vos réponses
A voir également:

2 réponses

voici le code source de ma page. je travaille avec struts et JSP

 <%@ taglib uri="http://jakarta.apache.org/struts/tags-bean" prefix="bean" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>
<%@ taglib uri="http://www.displaytag.org/1.2/" prefix="display"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-logic" prefix="logic" %>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<logic:notPresent scope="session" name="user">
    <logic:forward name="logon"/>
</logic:notPresent>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title><bean:message key="application.title"/></title>
        <style type="text/css" media="all">
            @import url("../css/site.css");
        </style>    
        <script type="text/javascript">
			
window.onload=show;
function show(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}

var field;
var text;
			
function copySelect(){
    text= selectText();
    if (field != null){
	field.value = text;
    }
}
			
function getFocusField(current_field){
    field = current_field;
}
			
function selectText(){
    var selectedText = null;
    if (window.getSelection){
        selectedText = window.getSelection();
    }
    else if (document.getSelection){
        selectedText = document.getSelection();
    }
    else if (document.selection){
	selectedText = document.selection.createRange().text;
    }
			
    if(selectedText!=null)
	return selectedText;
    return;
}	
       
        </script>
    </head>
    <body>       
        <div id="titre">
            <bean:message key="application.title"/>
        </div>
        <div id="soustitre">
            <bean:message key="application.user.logged"/><bean:write scope="session" name="user" property="login"/>
        </div>
        <div id="topRow">
            <div id="menu">                
                <dl>
                    <dt onmouseover="javascript:show();"><a href="" title="Go to Home page">Home</a></dt>
                </dl>                
                <dl>			
                    <dt onmouseover="javascript:show('smenu1');">TODO</dt>
                    <dd id="smenu1">
                        <ul>
                            <li><a href="#" title="See the current Applicant file">Applicant</a></li>                            
                            <li><a href="#">Mail</a></li>
                            <li><a href="#">Sous-Menu 1.3</a></li>
                            <li><a href="#">Sous-Menu 1.4</a></li>
                            <li><a href="#">Sous-Menu 1.5</a></li>
                            <li><a href="#">Sous-Menu 1.6</a></li>
                        </ul>
                        
                    </dd>
                </dl>                       
                <dl>	
                    <dt onmouseover="javascript:show('smenu2');">Applicant</dt>
                    <dd id="smenu2">
                        <ul>
                            <li><a href="#">Search</a></li>
                            <li><a href="#">applicant</a></li>
                            
                            <li><a href="#">Sous-Menu 2.3</a></li>
                            <li><a href="#">Sous-Menu 2.4</a></li>
                        </ul>
                    </dd>
                </dl>
                <dl>	
                    <dt onmouseover="javascript:show('smenu3');">Other</dt>
                    <dd id="smenu3">                                
                        <ul>
                            <li><a href="#">Statistics</a></li>
                            <li><a href="#">Sous-Menu 3.2</a></li>
                            <li><a href="#">Sous-Menu 3.3</a></li>
                            <li><a href="#">Sous-Menu 3.4</a></li>
                            <li><a href="#">Sous-Menu 3.5</a></li>
                            
                        </ul>
                    </dd>
                </dl>
                <dl>	
                    <dt onmouseover="javascript:show('smenu4');">Tools</dt>
                    <dd id="smenu4">
                        <ul>
                            <li><a href="#">Help</a></li> 
                            <li><a href="#">About</a></li>
                            <li><a href="#">Sous-Menu 4.3</a></li>
                        </ul>
                    </dd>
                </dl>
                
                <dl>
                    <dt onmouseover="javascript:show();"><html:link action="../logout" linkName="Log me out">Logout</html:link></dt>
                </dl>                 
            </div>
        </div>
        <div id="bodyLeftColumn">           
            <textarea cols="95" rows="50" id="cv" name="cv" onmouseup="javascript:copySelect();">
                Mickey Mouse est tout d'abord un personnage de dessin animé, créé en 1928, après que Walt Disney a dû laisser son premier personnage Oswald le lapin à son producteur. Les premiers courts métrages furent principalement animés par Ub Iwerks associé de Walt Disney au sein des studios Disney. Il fut plus tard un personnage de bande dessinée. Il représente une souris anthropomorphique et est devenu emblématique de la maison Disney. Pourquoi Walt Disney choisit-il une souris ? Il semble que le studio où travaillait Disney à cette époque était envahi de ces petits rongeurs (a priori une légende). Selon d'autres sources, Walt Disney possédait une souris apprivoisée nommée Mortimer (d'où le nom originel de Mickey). Iwerks l'a créé à partir de trois ronds pour la tête, afin d'en faciliter l'animation. Cependant, Oswald le lapin et Mickey Mouse avaient la même physionomie, a leur début. Un pied de nez, en quelque sorte. Seules les oreilles les différencient réellement. C'est Disney lui-même qui a doublé le personnage de Mickey du premier dessin animé à 1947.
                
                Historique [modifier]
                
                On établit souvent la date du 18 novembre 1928 comme celle de la naissance de Mickey, date de la sortie de Steamboat Willie au Colony Theater de New York, souvent considéré comme le premier dessin animé sonorisé (il s'agit en fait de «Song Car-Tunes» produit par Max Fleischer en mai 1924). Mais Mickey naît réellement dans le dessin animé « Plane Crazy » réalisé plus tôt dans l'année mais muet et projeté le 15 mai 1928. Il est inspiré de l'exploit de Charles Lindbergh. Un autre film The Gallopin' Gaucho faillit sortir à la fin de l'été mais Walt Disney préféra le rééditer comme Plane Crazy après la sortie de Steamboat Willie avec du son synchronisé.
                
                D'abord nommé Mortimer (c'est la femme de Disney qui, trouvant ce nom peu vendeur, a proposé Mickey), Mickey Mouse est le héros d'une grande quantité de dessins animés et de bandes dessinées. Souvent accompagné de son ami Dingo et de son chien Pluto, il noue aussi une idylle avec Minnie, une autre souris qui naît avec lui.
                
                Mickey apparaît dans les journaux en bande quotidienne le 13 janvier 1930, distribué par le King Feature Syndicate, scénarisé par Walt Disney et dessiné par Ub Iwerks.
                
                En bande dessinée, il joue souvent au détective pour aider le commissaire Finot face à plusieurs méchants comme Pat Hibulaire né dans Steamboat Willie et le Fantôme Noir.
                
                À partir de 1938, Mickey fut de plus en plus difficile à mettre en scène, son caractère était trop strict et lui faire faire des bêtises comme à ses débuts l'aurait transformé en un Donald Duck. Seule la séquence de L'Apprenti sorcier de Fantasia put réellement le mettre en scène. Ensuite, il fit plutôt des apparitions, laissant la vedette à Pluto, Dingo mais surtout à Donald.
                
                En 2004, Mickey Mouse est apparu dans une série télé animée en 3D ainsi que dans 2 films dont Mickey : Il était deux fois Noël lui aussi en 3D.
            </textarea>    
        </div>
        <div id="bodyRightColumn">
            <h2>create an Applicant</h2>
            <html:form action="createApplicant" styleId="createApplicant">
                <table>
                    <thead>
                        <tr>
                            <th><bean:message key="applicant.gender"/></th>
                            <th><bean:message key="applicant.lastname" /></th>
                            <th><bean:message key="applicant.firstname"/></th>                            
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <html:select property="gender" tabindex="1">
                                    <html:option value="Mister"/>
                                    <html:option value="Miss"/>
                                    <html:option value="Madam"/>
                                </html:select>
                            </td>
                            <td><html:text property="lastname" title="lastname" styleId="lastname" tabindex="2" onblur="javascript:getFocusField(this)" ></html:text></td>
                            <td><html:text  property="firstname" styleId="firstname" tabindex="3" onfocus="javascript:getFocusField(this)"></html:text></td>
                        </tr>
                    </tbody>
                </table>   
                <table>
                    <thead>
                        <tr>
                            <th/>
                            <th>day</th>
                            <th>month</th>
                            <th>year</th>    
                            <th/>
                            <th><bean:message key="applicant.nationality"/></th>
                            
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><b><bean:message key="applicant.birthday"/></b></td>
                            <td><html:text property="day" title="day" size="4" tabindex="4"/></td>  
                            <td><html:text property="month" title="month" size="5" tabindex="5"/></td>
                            <td><html:text property="year" title="year" size="6" tabindex="6"/></td>
                            <td/>
                            <td><html:text property="nationality" tabindex="7"/></td>
                        </tr>
                    </tbody>
                </table>   
                <table>
                    <thead>
                        <tr>
                            <th><bean:message key="applicant.address"/></th>
                            <th><bean:message key="applicant.pc" /></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><html:text property="address" tabindex="8"></html:text></td>
                            <td><html:text property="pc" tabindex="9"></html:text></td>                            
                        </tr>
                    </tbody>
                </table>  
                <table>
                    <thead>
                        <tr>
                            <th><bean:message key="applicant.city"/></th>
                            <th><bean:message key="applicant.country"/></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><html:text property="city" tabindex="10"></html:text></td>
                            <td><html:text property="country" tabindex="11"></html:text></td>                            
                        </tr>
                    </tbody>
                </table>  
                <table>
                    <thead>
                        <tr>
                            <th><bean:message key="applicant.phone"/></th>
                            <th><bean:message key="applicant.gsm"/></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><html:text property="phone" tabindex="12"></html:text></td>
                            <td><html:text property="gsm" tabindex="13"></html:text></td>                            
                        </tr>
                    </tbody>
                </table>   
                <table>
                    <thead>
                        <tr>
                            <th><bean:message key="applicant.mail"/></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><html:text property="mail" tabindex="14"></html:text></td>                            
                        </tr>
                    </tbody>
                </table>                 
                <html:submit tabindex="15"><bean:message key="button.submit" /></html:submit>
                <html:reset tabindex="16"><bean:message key="button.reset" /></html:reset>
                
            </html:form>
            
        </div>
        <div id="footer">
            all rights reserved 2007 QSPIN
        </div> 
    </body>
</html>


je pense que ca devrait marcher j'ai l'impression que Javascript n'arrive pas a recuperer le nom des champs.
2
Utilisateur anonyme
27 avril 2007 à 13:10
Salut!

J'espère que cela répond à ta question...

<html>
	<head>
		<style>
			body, th, td{
				vertical-align: top;
			}
			table{
				background-color: #eeeeee;
				padding: 0px;
				margin: 0px;
				border: solid 1px #222222;
			}
			th,td{
				background-color: #eeeeee;
				color: #888888;
							}
			th{
				background-color: #cccccc;
							}
		</style>
		<script>
		
			var field;
			var text;
			
			function copySelect(){
				text= selectText();
				if (field != null){
					field.value = text;
				}
			}
			
			function getFocusField(current_field){
				field = current_field;
			}
			
			/*
			*  Following function adapted from  'http://www.codetoad.com/javascript_get_selected_text.asp'
			*/
			function selectText(){
			    var selectedText = null;
			     if (window.getSelection){
			        selectedText = window.getSelection();
			    }else if (document.getSelection){
			        selectedText = document.getSelection();
			    }else if (document.selection){
			        selectedText = document.selection.createRange().text;
			    }
				
				if(selectedText!=null)
					return selectedText;
				return;
			}		
		</script>
	</head>

	<body>
		<form name="inputForm" action="http://www.somewhere.onthenet.com" method="POST">
			<table>
				
				<tr>
					<td>
						<textarea rows="10" cols="40" onmouseup="javascript:copySelect();">
[Extrait de Wikipédia] La plateforme et le langage Java sont issus d'un projet de Sun microsystem datant de 1990. L'ingénieur Patrick Naughton n'était pas satisfait par le langage C++ utilisé chez Sun, ses interfaces de programmation en langage C, ainsi que les outils associés. Alors qu'il envisageait une migration vers NeXT, on lui proposa de travailler sur une nouvelle technologie et c'est ainsi que le Projet Stealth (furtif) vit le jour.
						</textarea>
					</td>
					<td>
					<table>
						<tr>
							<td>
								Donnée 1:
							</td>
							<td>
								<input type="text" name="data_1" id="data_1" onblur="javascript: getFocusField(this);" />
							</td>
						</tr>
						<tr>
							<td>
								Donnée 2:
							</td>
							<td>
								<input type="text" name="data_2" id="data_2"  onblur="javascript: getFocusField(this);" />
							</td>
						</tr>
						<tr>
							<td>
								Donnée 3:
							</td>
							<td>
								<input type="text" name="data_3" id="data_3"  onblur="javascript: getFocusField(this);" />
							</td>
						</tr>
					</table>
					</td>
				</tr>
				<tr>
					<td colspan="2"><center><input type="submit" />&nbsp;&nbsp;<input type="reset" /></center></td>
				</tr>
			</table>
		<form>
	</body>
</html>


;-)
HackTrack
1