Selezione del testo a fuoco usando jQuery non funziona in iPhone iPad Browser

Question

Stiamo sviluppando Web-App per browser mobili, vorremmo il testo di qualsiasi casella di input per essere selezionato ogni volta che input-box ottiene il focus. Sotto la risposta si risolve il problema per il browser desktop chrome/safari. Sotto soluzione funziona bene su browser di Android, ma non sul browser iPhone/iPad, qualsiasi soluzione ..

$("#souper_fancy").focus(function() { $(this).select() }); 

$("#souper_fancy").mouseup(function(e){ 
     e.preventDefault(); 
}); 

Ref: -

Selecting text on focus using jQuery not working in Safari and Chrome

Answer 1

Risposta trovata qui non so come contrassegnare questa domanda come duplicata. Programmatically selecting text in an input field on iOS devices (mobile Safari)

mio correzione simile a questa: -

<script type="text/javascript"> 
      $('div,data-role=page').live('pageshow', function (event) { 
       jQuery.validator.unobtrusive.parse(".ui-page-active form"); 
       $("input[type='text'], textarea, input[type='password'], input[type='number']").live('mouseup', function (e) { e.preventDefault(); }); 
       $("input[type='text'], textarea, input[type='password'], input[type='number']").live('focus', function() {this.setSelectionRange(0, 9999); });    
      });  
    </script> 

Answer 2

Forse provare questo:

vmouseup
Evento normalizzato per la gestione di eventi touchend o mouseup

• http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html

JS:

$("#souper_fancy").focus(function() { 
    $(this).select(); 
}); 

$("#souper_fancy").vmouseup(function(e){ 
    e.preventDefault(); 
}); 

Answer 3

Questo funziona per me.

 $("input[type='text'],select,textarea").focus(function() { 
      $(this).addClass('text-focus'); 
     }); 

     $("input[type='text'],select,textarea").blur(function() { 
      $(this).removeClass('text-focus'); 
     }); 

     .text-focus 
     { 
     border: 1px solid #ea9a00; 
     } 

Answer 4

È possibile utilizzare document.execCommand('selectAll');. Tuttavia, se l'utente scorre la pagina, verrà visualizzato il menu Copia/Incolla.

Questo è quello che uso:

function trySelect(el, evenInactive, select_ios) { 
    var select = function() { 
     try { 
      if (mojo.isTouch && select_ios && core.iosDevice && mojo.isInput(el) && document.execCommand) { 
       document.execCommand('selectAll'); 
      } else { 
       el.select(); 
      } 
     } catch (e) { 
     } 
    }; 
    if (el && el.select && !el.disabled && (!el.readOnly || el.selectReadOnly) && mojo.isInput(el)) { 
     if (evenInactive || mojo.activeElement() === el) { 
      if (mojo.isTouch && core.webkitVer) { // http://code.google.com/p/chromium/issues/detail?id=32865 
       setTimeout(select, 0); 
      } else { 
       select(); 
      } 
     } 
    } 
} 

che fa riferimento a alcune funzioni interne:

• mojo.isTouch - veri per un dispositivo touch
• core.iosDevice - vero per un dispositivo iOS
• mojo.isInput - test per un elemento di input
• mojo.activeElement() - document.activeElemen t

edit: document.execCommand('selectAll'); non deve essere utilizzato invece el.setSelectionRange(0, el.value.length); utilizzato. Sembra funzionare bene su iOS5 ... Potrebbe non funzionare su iOS4 (non ho un dispositivo iOS4 su cui eseguire il test).