10

Tôi nghĩ rằng sự kiện trọng tâm không hoạt động với điện thoại di động JQuery: đây là mã của tôi? bạn nghĩ gì về nó và cảm ơn bạn.
(khi tôi xóa các cuộc gọi đến thư viện jquery di động, nó hoạt động).focus() vấn đề với JQUERY MOBILE?

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script> 
    </head> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#acceuil').live('pagecreate', function(event) { 
       $('#declencher').click(function() { 
        $('#cache').focus(); 
       }); 
       $('#declencher').trigger('click'); 
      }); 
     }); 
    </script> 
    <body> 
     <div data-role="page" id ="acceuil" > 
      <div data-role="header" data-theme="a" ><h3>aaa</h3></div> 
      <div data-role="content"> 
       <input id="cache" type="input">  
       <input type="button" id="declencher" value="declencher"> 
      </div><!-- content--> 
      <div data-role="footer" data-theme="a" data-position="fixed"><h3> Footer </h3></div> 
     </div> 
    </body> 

</html> 
+0

câu hỏi thường được trả lời nhanh hơn .... –

+0

bạn đã thử xóa '$ (tài liệu) .ready()'? Như được đề xuất trong tài liệu, bạn nên liên kết các sự kiện với 'pagecreate' thay vì' document.ready'. –

+0

cảm ơn bạn đã viết, tôi nghĩ câu hỏi của tôi rõ ràng là người đàn ông !!! tôi đã loại bỏ $ (tài liệu) .ready() nhưng nó không hoạt động, tôi nghĩ rằng focus() không được hỗ trợ bởi jquery mobile –

Trả lời

9

pagecreate cháy sự kiện trước khi JQM hiện một số thay đổi DOM vì vậy tôi cho rằng trọng tâm bị mất sau đó.

Thử chuyển sang pageshow, đặc biệt là vì bạn muốn tập trung mọi người dùng vào mọi lúc.

Nếu nó vẫn không hoạt động (có ví dụ một trường hợp) quấn mã kích hoạt tập trung trong một thời gian chờ (có, đó là một hack :))

setTimeout(function(){ 
$('#cache').focus(); 
},0); 

Đây là một hack, nhưng nó không phụ thuộc vào thời gian chờ đợi. setTimeout() thêm chức năng để hiển thị hàng đợi của chuỗi (đó là những gì chạy javascript và hiển thị trang trong trình duyệt) sau thời gian đã cho. Vì vậy, trong trường hợp này hàm được thêm ngay lập tức, vì vậy nó chạy sau khi dòng mã javascript hiện tại kết thúc. Vì vậy, đó là một cách để làm cho một số mã chạy ngay sau khi trình xử lý sự kiện kết thúc. Vì vậy, đây không phải là hacky như người ta có thể nghĩ. Tôi gọi nó là một hack, bởi vì nó sử dụng kiến ​​thức về cách trình duyệt hoạt động và nó che khuất luồng thực thi mã.

Tôi khuyên bạn nên đọc về cách thực thi javascript và vẽ trang được xử lý bởi cùng một hàng đợi trong một chuỗi. Để bất kỳ ai làm việc với hơn 20 dòng javascript.

Tôi khá chắc chắn rằng chỉ có một giải pháp tốt hơn - sửa nó trong khung công tác jQuery Mobile.

+1

nó hoạt động với setTimeout ..., cảm ơn u –

+0

tôi đã đấu tranh để tìm một giải pháp thanh lịch hơn cho vấn đề này. Điều này làm việc, nhưng con số trên phần cứng khác nhau hack này có thể làm việc không ổn định. Tôi đã thử toàn bộ gam màu của điện thoại di động jquery được xây dựng trong các sự kiện. Tốt nhất tôi có thể đạt được mà không có hack này là để cho phép "quầng" (hiệu ứng ánh sáng) trên lĩnh vực đó là tập trung. Con trỏ không được hiển thị. Bất cứ ai có ý tưởng nào khác? – mfalto

+0

Hack này sẽ không phụ thuộc vào phần cứng. Xem chỉnh sửa. – naugtur

2

Nếu bạn đang sử dụng HTML5 thì hãy sử dụng thuộc tính tự động lấy nét.

<body> 
    <div data-role="page" id ="acceuil" > 
     <div data-role="header" data-theme="a" ><h3>aaa</h3></div> 
     <div data-role="content"> 
      <input id="cache" type="input" autofocus>  
      <input type="button" id="declencher" value="declencher"> 
     </div><!-- content--> 
     <div data-role="footer" data-theme="a" data-position="fixed"><h3> Footer  </h3></div> 
    </div> 
</body> 

Vui lòng tham khảo Autofocus attribute of HTML5

1

thử thế này, nó hoạt động trên Safari di động của tôi, Chrome và cũng desktop duyệt

// div is some selected element 
      var f = function(event) { 
       $timeout(function() { // angular way, setTimeout is OK 
        input[0].focus(); 
        event.preventDefault(); 
       }) 
      }; 

      var mobile = false; 
      div.on('click', function(event) { 
       if(mobile) return; 
       f(event); 
      }); 

      div.on('touchstart', function(event) { 
       mobile = true; 
       f(event); 
      }); 

      div.on('touchend', function(event) { 
       event.preventDefault(); 
       event.stopPropagation(); 
      }); 
-1

Đây chỉ là một tùy chọn và không phải là chính xác giải pháp, điều này có thể phục vụ mục đích trong trường hợp nếu các giải pháp nêu trên không hoạt động.

Khi nhấp vào liên kết Bán hàng, tiêu điểm sẽ chuyển sang tuyên bố từ chối trách nhiệm bán hàng, trong trường hợp này, khoản chênh lệch sẽ được đề cập theo yêu cầu của bạn.

<div class="sales"> 
    <a href="#sales-disclaimer" onclick="setFocusToSales()"> 
     Sales 
    </a> 
</div> 

<div id='sales-disclaimer'> 
    some text here........ 
</div> 

/chức năng Javascript/

function setFocusToSales() 
{ 
    $('html, body').animate({ 
     scrollTop: $('#sales-disclaimer').offset().top 
    }, 1000); 
} 
-1

giải quyết

$(document).on("pageshow", "#casino", function(event) { 
    var txtBox=document.getElementById("SearchUsuario"); 
    txtBox.tabindex=0; //this do the trick 
    txtBox.value=""; 
    txtBox.focus(); 
}); 
0

On UIWebView của bạn, thiết lập keyboardDisplayRequiresUserAction để NO.

Nếu bạn đang sử dụng Cordova hoặc Phonegap, trong cấu hình của bạn.xml thêm thông tin sau:

<preference name="KeyboardDisplayRequiresUserAction" value="false"/>