Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 16

Discussione: evento onblur

  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    154

    evento onblur



    Salve gente..nella mia pagina ho questi 2 input

    codice HTML:
    <input type='text' id='barcode' name='barcode' placeholder='BarCode' autofocus>
    
    <input type='text' id='ricerca'  onBlur='myFunction();' name='ricerca' placeholder='Cerca prodotto'>
    il mio obbiettivo sarebbe quello di mantenere SEMPRE il focus sul campo "barcode" qualsiasi cosa io faccio sulla mia pagina (quindi se ad esempio clicco fuori il campo barcode nello sfondo grigio , se clicco su altri bottoni etc)... l'unica volta che il mio campo "barcode" dovrebbe perdere il focus è quando mi sposto dentro l'altro campo, per dare quindi il focus al campo "cerca prodotto"..

    allora cosa ho fatto: ho messo un onblur sul campo "cerca prodotto" e nella funzione ho fatto si che quando mi trovo sul campo cerca prodotto e clicco sullo sfondo grigio, quindi fuori il campo, il focus mi ritorna dentro il campo barcode:

    codice:
    // se clicco fuori input cerca prodotto
    
    function myFunction() {
         document.getElementById("barcode").focus();
        }
    il vero problema dove sta però...se io mi trovo in partenza dentro barcode e clicco sullo sfondo grigio, perdo il focus...mentre io vorrei FORZARLO a stare dentro il campo barcode in questo caso.... come posso risolvere? =)

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ciao, prima di proporti delle possibili soluzioni mi serve giusto qualche informazione:
    l'esempio che hai fatto non lo prevede ma parli di "altri bottoni etc" che possono essere presenti nella pagina; in tal caso, questi elementi devono risultare sempre inutilizzabili? Diversamente, quando dovrebbero risultare utilizzabili?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    154
    al contrario killerworm..dovrebbero essere sempre "utilizzabili"...nella mia pagina sono presenti bottoni che mi aprono finestre popup e altra roba che per me è indispensabile.

    inizialmente io avevo solo l input barcode e quindi facevo questo:
    <input type='text' id='barcodes' name='barcode' placeholder='BarCode' autofocus>

    codice:
    <script type="text/javascript">
        document.getElementById('barcodes').onblur = function (event) { 
            var blurEl = this; 
            setTimeout(function() {
                blurEl.focus()
            }, 10);
        };
    </script>
    qualsiasi cosa io facessi mi riportava in pochi millisecondi il focus dentro l input barcode...
    ma una volta aggiunto l altro input "cerca prodotto" ho dovuto abolire questo script altrimenti non potevo mettere il focus su questo nuovo input
    e quindi ho optato per le operazioni elencate sopra...

    ricapitolando, i miei obbiettivi sono:
    - ho il focus su "cerca prodotto", clicco esternamente e il focus ritorna sul primo input "barcode" (e questo l ho fatto)
    - ho il focus su "barcode", clicco esternamente e il focus dovrebbe rimanermi dentro "barcode" (questo non riesco a farlo)

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    il mio obbiettivo sarebbe quello di mantenere SEMPRE il focus sul campo "barcode" qualsiasi cosa io faccio sulla mia pagina (quindi se ad esempio clicco fuori il campo barcode nello sfondo grigio , se clicco su altri bottoni etc)...
    nella mia pagina sono presenti bottoni che mi aprono finestre popup e altra roba che per me è indispensabile.
    ho il focus su "barcode", clicco esternamente e il focus dovrebbe rimanermi dentro
    Queste indicazioni però sono contraddittorie. Chiarisci meglio questo punto. Se ci devono essere altri elementi attivi oltre quei due input, cosa intendi per "clicco esternamente"?
    Ti riferisci solo allo sfondo grigio?
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    154
    https://i.imgur.com/dfs0OI1.mp4

    ti mostro tramite un video/immagine cosa intendo fare =)

    (ti consiglio di stoppare il video ogni volta che cambiano le nuvolette cosi spero riesci a comprendere cosa intendo fare)
    Ultima modifica di Punix; 27-12-2020 a 14:39

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Ok, è più chiaro.

    Prova in questo modo, qui un esempio:
    codice HTML:
    <!DOCTYPE HTML>
    <html lang="it">
      <head>
        <title>Esempio</title>
        <style>
          .panel{
            background: #c7ccd4;
            padding: 10px;
            margin-bottom: 20px;
          }
        </style>
      </head>
      <body>
        <div class="panel">
          <input type='text' id='barcode' class="onblur-refocus-barcode" name='barcode' placeholder='BarCode' autofocus>
          <input type='text' id='ricerca' class="onblur-refocus-barcode" name='ricerca' placeholder='Cerca prodotto'>
          <hr>
          <input type="button" value="bottone">
          <input type="button" value="Altro bottone">
          <input type="button" value="bottone">
          <input type="radio" name="grupporadio">
          <input type="radio" name="grupporadio">
          <input placeholder="input text normale" title="Il focus torana subito a barcode appena attivi questo campo">
          <input class="onblur-refocus-barcode" placeholder="onblur-refocus-barcode" title="Il focus torana a barcode quando esci da questo campo">
        </div>
        <script>
          window.addEventListener('focus', refocusBarcode); // Riprendo il focus quando questa finestra del browser ritorna attiva
          document.addEventListener('focusin', refocusBarcode); // Per IE
          
          [].forEach.call(document.querySelectorAll('.onblur-refocus-barcode'), function(e){
            e.addEventListener('blur', refocusBarcode);
          });
          
          function refocusBarcode(e){
            setTimeout(function(){
              if(!document.activeElement.classList.contains('onblur-refocus-barcode')) document.getElementById('barcode').focus();
            });
          };
    
        </script>
      </body>
    </html>
    Inserisci lo script così com'è, quindi applica la classe onblur-refocus-barcode a tutti i campi di testo in cui prevedi di poter scrivere prima che il focus torni al campo barcode. Applica tale classe anche allo stesso campo barcode.

    In sostanza, la funzione refocusBarcode viene applicata al blur di tutti gli elementi con tale classe. Il setTimeout applica un ritardo (sebbene sia istantaneo) che serve per permettere di stabilire l'elemento attivo (activeElement), cioè quello che prende il focus dopo il blur appena avvenuto. A quel punto, se l'elemento attivo (qualsiasi esso sia) non ha classe onblur-refocus-barcode, il focus torna al campo barcode.

    Ho preferito l'uso di una classe specifica, piuttosto che applicare la funzione ai singoli elementi e di seguito verificarli uno per uno, in modo da poter decidere quali elementi devono mantenere il focus (come i campi di testo) prima che questo torni, appena avviene il loro blur, al campo barcode.

    Inoltre le prime due righe servono per riapplicare il focus se la finestra stessa risulta inattiva e viene poi riattivata. Cioè se si clicca qualsiasi altra cosa del sistema operativo, che non sia qualcosa all'interno della finestra stessa, chiaramente la finestra perde il focus, e così anche qualsiasi elemento all'interno di essa che lo avesse.

    Fai qualche prova e vedi se puo andare bene.
    Fai sapere.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  7. #7
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    154
    allora killer il tuo codice l ho provato esternamente al mio sito e funziona alla grande...applicandolo nel mio sito però rimane un piccolo problemino... adesso non ritorna il focus quando clicco sullo sfondo grigio per entrambi i bottoni barcode e ricerca prodotto mentre tutte le altre volte (quindi se clicco su altri bottoni o sugli radio, mi ritorna il focus su barcode come volevo ) ... temo sia colpa mia perchè non ti ho dato gli input corretti e non ti ho detto che in questi input utilizzavo altre funzioni che forse potrebbero andare in contrasto al codice che mi hai dato..

    questi sono gli input corretti (l id del primo input era barcodes e non barcode tralaltro, sorry)
    codice HTML:
    <HEAD>
    //css
    <style>
      .invalid { 
       border-color: red; 
       border-radius: 8px;
       background-color: white;
       background-image: url('immagini/searchicon.png');
       background-position: 10px 10px;
       background-repeat: no-repeat;
       padding-left: 40px;
       height: 40px;
       }
       .invalid2 {
       border-radius: 8px;
       background-color: white;
       background-image: url('immagini/searchicon.png');
       background-position: 10px 10px;
       background-repeat: no-repeat;
       padding-left: 40px;
       height: 40px;
       }
       .barcodes{
       border-color: #6bfb35;     
       border-radius: 8px;
       background-color: white;
       background-image: url('immagini/barcodeicon.png');
       background-position: 10px 10px;
       background-repeat: no-repeat;
       padding-left: 40px;
       height: 40px; 
       }
       .barcodes2{
       border-radius: 8px;
       background-color: white;
       background-image: url('immagini/barcodeicon.png');
       background-position: 10px 10px;
       background-repeat: no-repeat;
       padding-left: 40px;
       height: 40px; 
       }
       .box{}
      #avvertimento { color: red }
      #avvertimento2 { color: green }
    </style>
    
    <script>
    //script per messaggi colorati
    // se clicco dentro input ricerca prodotto
    
    function myfocus() {
        //restituisco messaggio rosso
        ricerca.classList.add('invalid');
         avvertimento.innerHTML = '<b>Se vuoi usare la pistola dei codici a  barre per vendere un prodotto assicurati di non aver cliccato dentro  questo rettangolo di ricerca prodotto, ma di essere dentro "barcode"  altrimenti la pistola non funziona!!</b>';
    }
        
        
    // se clicco fuori input ricerca prodotto
    
    function myFunction() {
        // rimuovo messaggio rosso
        ricerca.classList.remove('invalid');
        avvertimento.innerHTML = "";
        }
        
    
        
    // se clicco dentro input barcode
    
    function myfocus2() {
        //restituisco un messaggio verde
        barcodes.classList.add('barcodes');
        avvertimento2.innerHTML = '<b>Campo selezionato. Puoi utilizzare la pistola Barcode!!</b>';
    }
        
        
    // se clicco fuori input barcode
    
    function myFunction2() {
        // rimuovo messaggio verde
        barcodes.classList.remove('barcodes');
        avvertimento2.innerHTML = "";
        }
    </script>
    
    // script di killerworm
     <script>
          window.addEventListener('focus', refocusBarcodes); // Riprendo il focus quando questa finestra del browser ritorna attiva
          document.addEventListener('focusin', refocusBarcodes); // Per IE
          
          [].forEach.call(document.querySelectorAll('.onblur-refocus-barcodes'), function(e){
            e.addEventListener('blur', refocusBarcodes);
          });
          
          function refocusBarcodes(e){
            setTimeout(function(){
              if(!document.activeElement.classList.contains('onblur-refocus-barcodes')) document.getElementById('barcodes').focus();
            });
          };
    
        </script>
    
    </HEAD>
    
    <BODY>
    
    <input  type='text' id='barcodes' name='barcode' placeholder='BarCode'  class='barcodes2 onblur-refocus-barcodes' onBlur='myFunction2();'  onfocus='myfocus2()' autofocus>
    
    <input type='text'  id='ricerca'  onkeyup='cerca()' onBlur='myFunction();'  onfocus='myfocus()' name='ricerca' placeholder='Ricerca prodotto...'  class='invalid2 onblur-refocus-barcodes'>
    
    </BODY>
    mi dirai ma che ci fai con tutti sti onBlur e onfocus?... praticamente li utilizzo se guardi nell immagine video che ti ho postato prima per dare un messaggio in rosso quando ho il focus in "ricerca prodotto" e un messaggio in verde quando ho il focus in "barcodes" ( onfocus='myfocus()' ed onfocus='myfocus2()' )..ho messo anche delle funzioni onblur per rimuovere i messaggi colorati quando perdo i focus. ( onBlur='myFunction();' ed onBlur='myFunction2();' )


    Ho pensato allora adesso di far cosi:

    codice HTML:
    // se clicco fuori input ricerca prodotto
    
    function myFunction() {
        // rimuovo messaggio rosso
        ricerca.classList.remove('invalid');
        avvertimento.innerHTML = "";
    document.getElementById("barcodes").focus();     ---------> aggiunto questa riga per farmi ritornare il focus su barcode quando clicco sullo sfondo grigio e funziona
        }
        
     
    // se clicco fuori input barcode
    
    function myFunction2() {
        // rimuovo messaggio verde
        barcodes.classList.remove('barcodes');
        avvertimento2.innerHTML = "";
    document.getElementById("barcodes").focus();    -----------> qui ho provato la furbata di far tornare il focus sempre a se stesso ma non funziona 
        }
    
    Ultima modifica di Punix; 27-12-2020 a 17:08

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    Occhio a dove hai messo lo script; guarda bene dove l'ho messo io nel mio esempio.

    Dal momento che quello script viene eseguito istantaneamente e sono utilizzati metodi che vanno a pescare direttamente gli elementi presenti sulla pagina (vedi querySelectorAll), devi assicurarti che tali elementi siano già presenti, cioè che siano stati creati e siano quindi manipolabili via script

    In altre parole devi mettere lo script alla fine del body, come ho fatto io, oppure, se vuoi metterlo nell'head, devi inserirlo dentro una funzione richiamata al load del body o usando il cosiddetto ready di jQuery.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  9. #9
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    154
    Grazie killer worm

  10. #10
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    154
    ciao killerworm son sempre io...riscrivo su questo post perchè mi sono accorto oggi che lo script che mi hai gentilmente fornito

    codice:
     <script>
          window.addEventListener('focus', refocusBarcode); // Riprendo il focus quando questa finestra del browser ritorna attiva
          document.addEventListener('focusin', refocusBarcode); // Per IE
          
          [].forEach.call(document.querySelectorAll('.onblur-refocus-barcode'), function(e){
            e.addEventListener('blur', refocusBarcode);
          });
          
          function refocusBarcode(e){
            setTimeout(function(){
              if(!document.activeElement.classList.contains('onblur-refocus-barcode')) document.getElementById('barcode').focus();
            });
          };
    
        </script>
    funziona ma mi crea un problemino con un altro elemento della pagina ...nella pagina oltre a quei input dove facevo il giochino del focus, ho anche una tabella con celle "cliccabili"...il problema è che quando clicco all interno di una cella, quel refocus mi fa "scrollare" automaticamente la pagina verso l alto e mi crea problemi con altre funzioni della pagina...al click delle celle invece la tabella deve rimanermi ferma


    ti mostro qui sotto graficamente il mio problema:

    https://i.imgur.com/QsfBFAT.mp4

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.