lập trình tập trung vào lĩnh vực đầu vào tiếp theo trong safari di động

Tôi có một số lĩnh vực đầu vào phù hợp đóng vai trò như một dòng ô chữ câu trả lời:lập trình tập trung vào lĩnh vực đầu vào tiếp theo trong safari di động

enter image description here

Mỗi ô vuông có nó lĩnh vực đầu vào riêng. Lý do cho điều này là trong số những thứ khác mà đôi khi một hình vuông có thể được điền trước. Bây giờ, trên trình duyệt máy tính để bàn con trỏ nhảy đến trường nhập tiếp theo bất cứ khi nào một char được nhập vào. Đó là hoạt động thực sự tốt sử dụng một cái gì đó như:

$(this).next('input').focus();

Nhưng vấn đề trên safari di động (chúng tôi thử nghiệm trên ios) là tôi không biết làm thế nào để tự động "nhảy" vào lĩnh vực đầu vào tiếp theo chương trình khác. Người dùng có thể làm điều đó thông qua nút "tiếp theo", nhưng có cách nào để thực hiện điều này tự động không?

Tôi biết rằng focus() kích hoạt có một số hạn chế về ios, nhưng tôi cũng đã nhìn thấy một số cách giải quyết sử dụng nhấp chuột tổng hợp, vv

Nguồn

2013-09-10 David

bất kỳ may mắn nhận này để làm việc? –

Tôi tìm thấy một workaround mà có thể làm việc cho bạn.

Apparently Chỉ iOS/Safari "chấp nhận" tiêu điểm khi bên trong trình xử lý sự kiện chạm. Tôi đã kích hoạt sự kiện chạm và chèn .focus() vào trong đó. Tôi cố gắng này trên iPhone3S và iPhone5S với Safari của tôi và nó hoạt động: (nút bên cạnh báo chí trong bản demo)

var focused = $('input:first'); //this is just to have a starting point 

$('button').on('click', function() { // trigger touch on element to set focus 
    focused.next('input').trigger('touchstart'); // trigger touchstart 
}); 

$('input').on('touchstart', function() { 
    $(this).focus(); // inside this function the focus works 
    focused = $(this); // to point to currently focused 
});

Demo here

Nguồn

2013-09-10 21:34:04 Sergio

hoạt động vì sự kiện bắt đầu của bạn là một lần nhấp chuột (sự kiện chuột). Nếu bạn cố gắng sử dụng sự kiện khác như sự kiện bắt đầu (bên cạnh sự kiện chuột) nó sẽ không hoạt động. Liên kết này có thể trợ giúp: http://www.quora.com/Mobile-Safari-iPhone-or-iPad-with-JavaScript-how-can-I-launch-the-on-screen-keyboard – darkyndy

@darkyndy Liệu nó có có vấn đề gì nếu sự kiện nhấp "bắt đầu" là có thật hay không nếu nó được kích hoạt? – Wytze

@Wytze - từ những gì tôi đã thấy nó quan trọng, phải là một sự kiện thực (tương tác người dùng) – darkyndy

-5

<!DOCTYPE html> 
<html> 
<head> 
    <style type="text/css"> 
    #hidebox {position:absolute; border: none; background:transparent;padding:1px;} 
    #hidebox:focus{outline: 0;} 

    </style> 
</head> 

<body> 

<input type="text" maxlength="1" onkeyup="keyUp(this)" onkeydown="keyDown(this)" size="2" id="hidebox" at="1"> 
<input type="text" maxlength="1" size="2" id="mFirst" at="1" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mSecond" at="2" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mThird" at="3" onfocus="onFocus(this)"><input type="text" maxlength="1" size="2" id="mFourth" at="4" onfocus="onFocus(this)"> 
</li> 
<script type="text/javascript"> 

window.onload = function() { 
    document.getElementById("mFirst").focus(); 
} 
var array = ["mFirst","mSecond","mThird","mFourth"]; 
function keyUp(e) { 
    var curId = array[Number(e.getAttribute("at"))-1]; 
    var nextId = array[Number(e.getAttribute("at"))]; 
    var curval= e.value; 
var letters = /^[0-9a-zA-Z]+$/; 
if(e.value.match(letters)){ 
    document.getElementById(curId).value = curval; 
    if(e.getAttribute("at") <= 3){ 
    var nextPos = document.getElementById(nextId).offsetLeft; 
    e.setAttribute("at",Number(e.getAttribute("at"))+1); 
    e.style.left = nextPos+"px"; 
    } 
e.value = "" 
}else { 
e.value = ""; 
} 
} 
function keyDown(e) { 
    var curId = array[Number(e.getAttribute("at"))-1]; 
    document.getElementById(curId).value = ""; 
} 

function onFocus(e) { 
    document.getElementById("hidebox").focus(); 
    document.getElementById("hidebox").setAttribute("at",Number(e.getAttribute("at"))); 
    document.getElementById("hidebox").style.left = e.offsetLeft+"px"; 
    document.getElementById("hidebox").style.top = e.offsetTop+"px"; 
} 

</script> 
</body> 
</html>

Nguồn

2014-05-22 08:34:35

lập trình chuyển sang lĩnh vực đầu vào tiếp theo trong một trình duyệt di động mà không loại bỏ bàn phím dường như là không thể. Tuy nhiên, một hack thông minh là trao đổi các vị trí, giá trị và các thuộc tính của phần tử đầu vào với Javascript để có vẻ như bạn đang chuyển sang trường tiếp theo khi thực tế bạn vẫn tập trung vào cùng một yếu tố. Đây là mã cho một trình cắm thêm jQuery hoán đổi số id, name và giá trị. Bạn có thể điều chỉnh nó để trao đổi các thuộc tính khác khi cần thiết. Ngoài ra, hãy đảm bảo sửa mọi trình xử lý sự kiện đã đăng ký.

$.fn.fakeFocusNextInput = function() { 
    var sel = this; 
    var nextel = sel.next(); 
    var nextval = nextel.val(); 
    var nextid = nextel.attr('id'); 
    var nextname = nextel.attr('name'); 
    nextel.val(sel.val()); 
    nextel.attr('id', sel.attr('id')); 
    nextel.attr('name', sel.attr('name')); 
    sel.val(nextval); 
    sel.attr('id', nextid); 
    sel.attr('name', nextname); 
    // Need to remove nextel and not sel to retain focus on sel 
    nextel.remove(); 
    sel.before(nextel); 
    // Could also return 'this' depending on how you you want the 
    // plug-in to work 
    return nextel; 
};

Demo đây: http://jsfiddle.net/EbU6a/194/

Nguồn

2014-06-12 12:57:28

Thông minh. Nếu bạn sử dụng 'nextel.detach();' thay vì 'nextel.remove();', các trường sẽ được tái sử dụng. ('remove()' cũng loại bỏ các trình lắng nghe bị ràng buộc) – szupie

Điều này không hoạt động nếu có các phần tử ở giữa các đầu vào. Xem http://jsfiddle.net/EbU6a/743/ – RubenSandwich

@RubenSandwich có, mã mẫu này đưa ra một số giả định, nhưng nó có thể thích nghi với các phần tử ở bất kỳ vị trí nào bằng cách cập nhật '.next()' và '.before () 'để loại bỏ phần tử biểu mẫu tiếp theo và chèn lại nó bất cứ nơi nào nó cần. –

Tôi hy vọng đây là những gì bạn đang tìm kiếm cho-

$(document).ready(function() { 
    $('input:first').focus(); //focus first input element 

    $('input').on('keyup', function(e) { 
    if(e.keyCode == 8) { //check if backspace is pressed 
     $(this).prev('input').focus(); 
     return; 
    } 
    if($(this).val().length >= 1) { //for e.g. you are entering pin 
     if ($(this).hasClass("last")) { 
     alert("done"); 
     return; 
     } 
     $(this).next('input').focus(); 
    } 
    }); 

    $('input').on('focus', function() { 
    if(!$(this).prev('input').val()){ 
     $(this).prev('input').focus(); 
    } 
    }); 
});

mã kiểm tra ở đây,

https://jsbin.com/soqubal/3/edit?html,output

Nguồn

2017-01-02 12:22:57 Kapilrc

-2

UIWebView có tài sản keyboardDisplayRequiresUserAction

Khi thuộc tính này được đặt thành true, người dùng phải khai thác rõ ràng các yếu tố trong chế độ xem web để hiển thị bàn phím (hoặc chế độ xem đầu vào có liên quan khác) cho phần tử đó. Khi được đặt thành false, sự kiện lấy nét trên một phần tử sẽ làm cho chế độ xem đầu vào được hiển thị và được liên kết với phần tử đó một cách tự động.

https://developer.apple.com/documentation/uikit/uiwebview/1617967-keyboarddisplayrequiresuseractio

Nguồn

2017-12-12 23:15:12 pkamb

lập trình tập trung vào lĩnh vực đầu vào tiếp theo trong safari di động

Trả lời

Các vấn đề liên quan