2017-05-16 19 views
7

Aşağıda basit bir snippet'i hazırladım, bir metin giriş alanı, bir düğme ve bir tane seçin. Düğmeye tıklamak programatik olarak girişe odaklanır. Seçimi değiştirmek de girişe odaklanır. Bu, tüm masaüstü tarayıcılarında ve Android'de geçerlidir, ancak iOS'ta değildir. IOS'ta odaklama, düğme için çalışır, ancak seçim için değil.Seçme etiketinin güvenilir bir onchange olayı olan iOS'ta metin girişini programa göre nasıl odaklanır?

var mySelect = document.getElementById('mySelect'); 
 
var myButton = document.getElementById('myButton'); 
 
var myTextInput = document.getElementById('myTextInput'); 
 

 
mySelect.addEventListener('change', function(changeEvent) { 
 
    console.log('Change event trusted: ' + changeEvent.isTrusted); 
 
    myTextInput.focus(); 
 
}); 
 

 
myButton.addEventListener('click', function(clickEvent) { 
 
    console.log('Click event trusted: ' + clickEvent.isTrusted); 
 
    myTextInput.focus(); 
 
});
<select id="mySelect"> 
 
    <option value="0">Option 1</option> 
 
    <option value="1">Option 2</option> 
 
</select> 
 
<button id="myButton">Focus through onclick</button> 
 
<input id="myTextInput" type="text" />

O iOS yazılabilir girişinin programatik odak engellemek için can sıkıcı pop-up klavye önlemek için bazı yerli korunması davranışa sahip olduğu görülmektedir. Bu koruma sadece bir noktada gerçek bir kullanıcı etkileşimi tarafından başlatılmayan olayları reddeder. Spec entry

IsTrusted öznitelik için başlatıldı değer döndürmesi gerekir:: spec Tanım olarak

, bir kullanıcı tarafından başlatılan bir olay, bir etkinliği güvenilir olan. Bir olay oluşturulduğunda, özellik false olarak başlatılmalıdır.

isTrusted, bir etkinliğin kullanıcı aracısı tarafından gönderilip gönderilmediğini gösteren bir kolaylıktır (dispatchEvent() yönteminin tersine). Tek eski istisna, kullanıcı aracısının isTrusted özniteliği false olarak başlatılan bir olayı göndermesine neden olan click() 'dir. Benim console.log tablolar aracılığıyla görebilirsiniz

hem click ve change olaylar onların isTrusted özelliği true var, ama ikincisi zaten iOS tarafından engellendiğini.

Çok sayıda arama yaptım ve bu iOS davranışının amaçlandığını açıklayan bir ifade bulamadı.

Bu konuda bir şey bilen var mı? <select> 'un değişim etkinliğini elde etmek için bir girişe odaklanmak ve klavyeyi yükseltmek için bir iş var mı?

doğrudan select çoğunlukla birlikte click, mouseup ve mousedown çalışan birçok yol, denedi, ama oğlan bu olaylar

Sonuç olarak ... farklı tarayıcılarda tutarsız

, burada da aynı snippet'imin jsfiddle olduğunu Yukarıda verilen. https://jsfiddle.net/qndg7sex/4/

"Seks" kelimesini nasıl içerdiğini not edin.

DÜZENLEME

Ben tanıtan denedi bir kukla olan clickselect 'ın change tarafından tetiklenen olacaktır button. Bu dummy button 'işleyicide .focusinput'u denedim, ancak boşuna.

DÜZENLEME 2

Ben ConnorsFan ödüllendirme lütuf verdi.IOS'taki davranışa yönelik resmi bir girişle ilgili herhangi bir güncellememememiz gerçeği, bu konuda gerçekten herhangi bir halka açık bilgi bulunmadığına olan inancımı güçlendiriyor. Yanıtı kabul edildiği şekilde de işaretledim çünkü yaklaşımım burada önerilen çözüm ile oldukça benzerdi. Hiçbir jQuery eklentisi aslında dahil değildi, ama yine de bir seçim gibi davranan özel bir giriş elemanı aldı.

+1

Buna odaklanan bir iş parçacığı: http://stackoverflow.com/a/16601288/6429774 – Phil

cevap

3

Muhtemelen Cordova project options'da keyboardDisplayRequiresUserAction adında bir bayrak bulunduğunu fark etmişsinizdir. Yerel iOS uygulamalarında focus() kullanımındaki kısıtlamaları kaldırmak için false olarak ayarlanabilir. Ancak normal Web uygulamaları için, iOS tarayıcılarda bu kısıtlamalar hakkında herhangi bir resmi belge görmedim. Birçok başarısız kalkışmak sonra

iOS'taki select eleman ile focus() çalışması için buldum tek geçici çözüm this jsfiddle gösterildiği gibi, örnek jQuery'nin select2 için, bir yedek kontrolü kullanmaktır. CSS öznitelikleri, yerel seçim elemanına daha benzer görünmesi için düzeltilebilir. myTextInput.focus() çağrı liste öğelerinin mouseup olay işleyicisi yapılabilir

, o işleyici açılır liste açılan ilk defa Ayarlanmadığı

:

var firstOpen = true; 

$(mySelect).select2({ 
    minimumResultsForSearch: Infinity 
}).on('change', function(e) { 
    console.log("change event was fired"); 
}).on('select2:open', function(e) { 
    if (firstOpen) { 
     firstOpen = false; 
     $('.select2-results ul').on('mouseup', function(e) { 
      myTextInput.focus(); 
     }); 
    } 
}); 
+1

Ayarım tarayıcıda olsa da Cordova hakkında çok yardımcı oluyor. Seçimimi bir "radyo düğmesi grubu" özel bileşenine dönüştürüyorum (proje React'ta). Bu şekilde tıklama etkinliğinden yararlanabilirim. –

4

Sadece textField firstresponder yapmak, bu irade birisi,

yardımcı olabilir

[self.textField becomeFirstResponder];

Ve sadece biraz daha tipik bir örnek kod: Ayrıca klavyeyi pop-up Hikaye panosunda

, metin alanlarından birine tıklayın ve söz konusu sınıf olarak çıkışlar-temsilci ayarlayın. Bu sınıfta, .h dosyasında bunu bir UITextFieldDelegate

@interface Login : UIViewController <UITextFieldDelegate> 

.m dosyasında Sonra olduğunu beyan emin olun, sen ...

-(BOOL)textFieldShouldReturn:(UITextField *)textField 
{ 
if (textField == self.loginEmail) { [self.loginPassword becomeFirstResponder]; } 
if (textField == self.loginPassword) { [self yourLoginRoutine]; return YES; } 
return YES; 
} 

zaman örneğin bu olabilir Bir kullanıcı sanal klavyede "İleri" düğmesini - 'e-posta' alanında tıklar - sizi doğruca şifre alanına taşır. Bir kullanıcı sanal klavye üzerindeki "İleri" düğmesini - 'şifre' alanında tıklattığında, doğru bir şekilde YourLoginRoutine'ınızı çağırır.

(Hikaye panosunda, öznitelik denetçisinde, Dönüş tuşunda istediğiniz metni seçebileceğinize dikkat edin ... işte "İleri", e-posta alanında güzel çalışır ve "Bitti" güzel çalışır. parola alanı.)

Yardım edin!

+1

Bu harika geri bildirim, yerel iOS gelişmeleri için çok yararlı olabilir. Benim durumumda tarayıcı içi javascript ile uğraşıyorum. –

+0

Teşekkür ederim tamamen bana çok yardımcı oluyor. :) –

İlgili konular