Các trường nhập HTML không lấy được tiêu điểm khi nhấp vào

Tôi gặp sự cố và không thể tìm ra nguyên nhân chính xác gây ra hành vi này. Tôi không thể truy cập các trường và textareacác đầu vào trên biểu mẫu HTML của mình.

Thật không may, JS, HTML và CSS rất lớn, vì vậy tôi thực sự không thể đăng tất cả ở đây.

Ai có thể cho tôi biết những gì cần tìm khi gỡ lỗi hành vi kỳ lạ này?

CẬP NHẬT

Nếu tôi di chuyển con trỏ qua inputtrường, tôi có thể thấy con trỏ văn bản, nhưng khi tôi nhấp vào nó, trường không lấy được tiêu điểm. Tôi có thể truy cập trường bằng cách nhấn Tabphím và nếu tôi nhấp chuột phải vào nó và sau đó nhấp vào trường, tôi cũng sẽ lấy được tiêu điểm cho nó.

... và nope, chúng không có disabledhoặc readonlythuộc tính ;-)

khi tôi nhấp vào nó, trường không lấy được tiêu điểm. tôi có thể truy cập trường bằng cách nhấn "phím tab"

Có vẻ như bạn đã hủy hành động mặc định cho mousedown sự kiện. Tìm kiếm thông qua HTML và JS của bạn cho các trình xử lý onmousedown và tìm kiếm một dòng đọc.

return false;

Dòng này có thể ngăn bạn lấy nét bằng cách nhấp vào.

Re: bình luận của bạn, tôi cho rằng bạn không thể chỉnh sửa mã thêm trình xử lý này? Nếu bạn có thể, giải pháp đơn giản nhất là chỉ cần xóa return false;câu lệnh.

có cách nào để chỉ thêm chức năng vào trình kích hoạt sự kiện bằng cách không ghi đè lên nó không?

Điều đó phụ thuộc vào cách trình xử lý được gắn vào. Nếu nó được đính kèm bằng phương pháp đăng ký truyền thống, ví dụ như element.onmousedown , thì bạn có thể tạo một wrapper cho nó:

var oldFunc = element.onmousedown;
element.onmousedown = function (evt) {
    oldFunc.call(this, evt || window.event);
}

Vì "trình bao bọc" này không trả về false , nó sẽ không hủy hành động mặc định (lấy nét) cho phần tử. Nếu sự kiện của bạn được đính kèm bằng phương thức đăng ký nâng cao, chẳng hạn như addEventListener hoặc attachmentEvent thì bạn chỉ có thể xóa trình xử lý sự kiện bằng cách sử dụng tên hàm / tham chiếu và gắn lại nó bằng một hàm được bọc tương tự như trên. Nếu đó là một hàm ẩn danh được thêm vào và bạn không thể nhận được tham chiếu đến nó, thì giải pháp duy nhất sẽ là đính kèm một trình xử lý sự kiện khác và tập trung phần tử theo cách thủ công bằng phương thức element.focus () .

Tôi cũng có vấn đề này. Tôi đã sử dụng disableSelection()phương thức của jQuery UI trên DIV chính chứa các trường đầu vào của tôi. Trong Chrome, các trường nhập không bị ảnh hưởng nhưng trong Firefox, các đầu vào (và cả textareas) không tập trung vào việc nhấp chuột. Điều kỳ lạ ở đây là sự kiện nhấp chuột vào các đầu vào này đã hoạt động.

Giải pháp là loại bỏ disableSelection()phương thức cho DIV chính.

Tôi biết đây là một chủ đề rất cũ, nhưng điều này mới xảy ra với tôi gần đây; tôi đã mất một thời gian để tìm ra nó.

Vấn đề tương tự này có thể được gây ra bằng cách đặt các phần tử 'đầu vào' bên trong cặp thẻ 'nhãn'.

Trong trường hợp của tôi, tôi đã định tạo một cặp thẻ 'div' nhưng thay vào đó tôi đã vô tình tạo một cặp thẻ 'label', sau đó chèn một số trường nhập văn bản 'input type = "text" ..' bằng DOM.

Nó hiển thị bình thường trên màn hình, nhưng khi tôi nhấp vào bất kỳ trường văn bản nào, con trỏ tiếp tục nhảy trở lại 'đầu vào' đầu tiên và thực sự hoạt động thất thường.

Tôi phải mất một thời gian để tìm ra điều này bởi vì hành vi này là tế nhị, và hoàn toàn không phải những gì tôi mong đợi khi phạm phải sai lầm này.

bsnider

Sử dụng onclick="this.select()"thuộc tính cho thẻ đầu vào.

Tôi đã phải vật lộn với cùng một vấn đề một thời gian trước đây. Tôi đang sử dụng plugin jquery.layout trong hộp thoại jquery-ui phương thức và tôi không thể truy cập bất kỳ trường nào trong đó.

Có vẻ như có z-indexvấn đề (một số divđã vượt quá các trường nhập của tôi, vì vậy tôi không thể nhấp vào chúng). Bạn nên kiểm tra và thử thay đổi z-indexgiá trị của các trường đầu vào.

Điều này đôi khi xảy ra khi có <label>các thẻ không cân bằng trong biểu mẫu.

Tôi cũng gặp sự cố này và trong trường hợp của tôi, tôi thấy rằng màu của phông chữ giống với màu của nền, vì vậy nó trông giống như không có gì xảy ra.

Điều này có thể xảy ra trong bootstrap nếu bạn không đặt các cột của mình bên trong a <div class ='row'>. Cột nổi không bị xóa và bạn có thể nhận được cột tiếp theo đè lên cột trước đó, do đó, các nhấp chuột sẽ không chạm vào các phần tử dom mà bạn mong đợi.

Nếu bạn gặp phải sự cố này khi sử dụng canvas với DOM trên thiết bị di động, câu trả lời của Ashwin Gtôi hoàn toàn phù hợp với tôi, nhưng tôi đã làm được điều đó thông qua javascript

var element = document.getElementById("myinputfield");
element.onclick = element.select();

Sau đó, mọi thứ hoạt động hoàn hảo.

Tôi đã đọc tất cả các câu trả lời ở trên và một số hướng dẫn tôi đến vấn đề, nhưng không phải giải pháp cho vấn đề.

Nguyên nhân sâu xa của vấn đề là disableSelection(). Nó gây ra tất cả các vấn đề, nhưng loại bỏ nó không phải là một giải pháp, vì (ít nhất là vào năm 2016 hoặc một chút trước đó), trên các thiết bị màn hình cảm ứng , bạn "phải" sử dụng điều này nếu bạn muốn có thể di chuyển các đối tượng bằng jQuery .

Giải pháp là để lại disableSelection()phần tử có thể sắp xếp, nhưng cũng thêm một hành động liên kết ngay trên:

 $('#your_selector_id form').bind('mousedown.ui-disableSelection selectstart.ui-disableSelection', function(event) {
    event.stopImmediatePropagation();
 })

Phần tử formtrong jQuery chỉ là để dừng truyền trên biểu mẫu, vì bạn có thể cần truyền trên một số phần tử.

Tôi đã gặp sự cố tương tự - không thể tìm ra lý do là gì, nhưng tôi đã sửa nó bằng cách sử dụng mã sau. Bằng cách nào đó, nó không thể chỉ tập trung các đầu vào trống:

$('input').click(function () {
        var val = $(this).val();
        if (val == "") {
            this.select();
        }
    });

Tôi gặp sự cố này vì mã này:

$("#table tbody tr td:first-child").bind("mousedown", function(e){
    e.preventDefault();
    $(this).parents('tr').removeClass('draggable');
});

Tôi đã giải quyết nó bằng cách loại bỏ

e.preventDefault ();

Mã mới:

$("#table tbody tr td:first-child").bind("mousedown", function(){
    $(this).parents('tr').removeClass('draggable');
});

Tôi đang sử dụng giao diện người dùng JQuery và Bootstrap vì vậy tôi gặp phải vấn đề này và tôi nghĩ rằng đó là xung đột giữa cả hai như trong trường hợp bình thường, vùng văn bản hoặc đầu vào được gửi có thể chỉnh sửa về bản chất nhưng tôi đã thực hiện giải pháp này sau khi kiểm tra tất cả các câu trả lời ở trên nhưng không có giải quyết hỗ trợ trình duyệt chéo cho tất cả các trình duyệt chính , nhưng tôi đã giải quyết được nó và tôi muốn chia sẻ giải pháp của mình, bạn có thể sử dụng nó trên văn bản đầu vào và văn bản

(Đã thử nghiệm trên Máy tính để bàn: IE (Tất cả các phiên bản), Chrome, Safari, Windows Edge, Firefox, Visual Studio Cordova Ripple Viewer trên Windows & Visual Studio Cordova Windows 10 Store App)

(Đã thử nghiệm trên thiết bị di động: Chrome, Firefox, Trình duyệt Internet Android & Ứng dụng Visual Studio Cordova trên Ứng dụng điện thoại Android & Visual Studio Cordova Windows 8 + 8.1 + 10)

Đây là Mã HTML:

<textarea contenteditable id="textarea"></textarea>

Đây là Mã CSS:

textarea {
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    /*to make sure that background color and text color is not the same (from the answers above)*/
    background-color:#fff !important;
    color:#733E27 !important;
 }        

Đây là mã JQuery trên tài liệu đã sẵn sàng

$("textarea").click(function() {
        setTimeout(function(){
            $("textarea").focus();
            //add this if you are using JQuery UI (From The Solutions Above)
            $("textarea").enableSelection();
            var val = $("textarea").val();
            if (val.charAt(val.length-1) !== " " && val.length !== 1) {
                alert(val.length);
                val += " ";
            }
            $("textarea").val(val);
        }, 0);
    });

    if (navigator.userAgent.indexOf('Safari') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
        //alert('Its Safari or chrome');
        $("textarea").onfocus(function(e) {
            setTimeout(function(){
                var end;
                if ($("textarea").val === "") {
                    end = 0;
                } else {
                    end = $("textarea").val.length;
                }
                if ($("textarea").setSelectionRange) {
                    var range = document.getElementById('textarea').createTextRange();
                    if (range) {
                        setTimeout(range, 0, [end, end]);
                    } else { // IE style
                        var aRange = document.getElementById('textarea').createTextRange();
                        aRange.collapse(true);
                        aRange.moveEnd('character', end);
                        aRange.moveStart('character', end);
                        aRange.select();
                    }
                }
                e.preventDefault();
                return false;
            }, 0);
        });
    }

Bạn có thể kiểm tra nó trên ứng dụng web của tôi tại www.gahwehsada.com

Khi bạn nói

and nope, they don't have attributes: disabled="disabled" or readonly ;-)

Điều này thông qua việc xem html của bạn, mã nguồn của trang hay DOM?

Nếu bạn kiểm tra DOM bằng Chrome hoặc Firefox, thì bạn sẽ có thể thấy bất kỳ thuộc tính nào được thêm vào các trường đầu vào thông qua javasript hoặc thậm chí là một div lớp phủ

Chỉ trong trường hợp ai đó đang tìm kiếm câu trả lời này, chúng tôi đã gặp vấn đề tương tự và giải quyết nó bằng cách thay đổi chỉ mục z của các thẻ đầu vào. Rõ ràng một số div khác đã mở rộng quá xa và chồng lên các hộp đầu vào.

Tôi đã gặp vấn đề này trong hơn 6 tháng, nó có thể là vấn đề tương tự. Triệu chứng chính là bạn không thể di chuyển con trỏ hoặc chọn văn bản trong phần nhập văn bản, chỉ có các phím mũi tên mới cho phép bạn di chuyển trong trường nhập. Vấn đề rất khó chịu, đặc biệt là đối với các trường nhập văn bản. Tôi có html này được điền với 1 trong số 100 biểu mẫu thông qua Javascript:

<div class="dialog" id="alert" draggable="true">
    <div id="head" class="dialog_head">
        <img id='icon' src='images/icon.png' height=20 width=20><img id='icon_name' src='images/icon_name.png' height=15><img id='alert_close_button' class='close_button' src='images/close.png'>
    </div>
    <div id="type" class="type"></div>
    <div class='scroll_div'>
        <div id="spinner" class="spinner"></div>
        <div id="msg" class="msg"></div>
        <div id="form" class="form"></div>
    </div>
</div>

Rõ ràng 6 tháng trước, tôi đã cố gắng làm cho cửa sổ bật lên có thể kéo được và không thành công, đồng thời phá vỡ các đầu vào văn bản. Sau khi tôi loại bỏ draggable = "true", nó hoạt động trở lại!

Tôi vừa tìm thấy một lý do khác có thể xảy ra cho vấn đề này, một số hộp văn bản đầu vào bị thiếu dấu đóng "/", vì vậy tôi đã có <input ...>khi biểu mẫu chính xác là <input ... />. Điều đó đã sửa nó cho tôi.

Trong trường hợp của tôi, đó là cửa sổ bật lên Bootstrap ở trạng thái đã mở. Đầu vào văn bản nằm trong một cửa sổ bật lên lịch khác trên đầu trang Bootstrap, đầu vào có tiêu điểm trở lại sau khi xóa tabindex="-1"thuộc tính khỏi phương thức Bootstrap.

iPhone6 ​​chrome

Vấn đề đối với tôi là đặt trường đầu vào bên trong <label>và<p>

như thế này :

<label>
  <p>
     <input/>
  </p>
</label>

Tôi đã đổi chúng thành

<div>
  <div>
     <input/>
  </div>
</div>

Và nó hiệu quả với tôi.

Sau khi kiểm tra câu trả lời này, Vui lòng kiểm tra các câu trả lời khác trong trang này, vấn đề này có thể có các lý do khác nhau

Điều này cũng sẽ xảy ra bất cứ khi nào một div kết thúc bằng vị trí trên các điều khiển trong div khác; như sử dụng bootstrap cho bố cục và có "col-lg-4" theo sau là lỗi chính tả "col-lg = 8" ... div mồ côi / sai tên bên phải bao phủ bên trái và ghi lại các sự kiện chuột. Dễ bị sai chính tả đó, - và = cạnh nhau trên bàn phím. Vì vậy, hãy trả tiền để kiểm tra với thanh tra và tìm kiếm 'bất ngờ' để khám phá những divs hoang dã này.

Có một cửa sổ không nhìn thấy che các điều khiển và sự kiện chặn không, và làm thế nào điều đó có thể xảy ra? Hóa ra, fatfingering = for - với tên lớp bootstrap là một cách ...

Tôi đã từng gặp vấn đề tương tự. Cuối cùng tôi đã tìm ra nó bằng cách kiểm tra phần tử và phần tử tôi nghĩ rằng tôi đã chọn là phần tử khác. Khi tôi làm điều đó, tôi thấy có một phần tử ẩn có chỉ số z là 9999, sau khi tôi khắc phục sự cố của tôi đã biến mất.

vấn đề đối với tôi là tôi đang sử dụng class="modal fade", tôi đã thay đổi nó cho class="modal hide". Điều đó đã giải quyết được vấn đề.

Tôi đã từng gặp vấn đề tương tự. Tóc tôi đau hàng giờ đồng hồ thử đủ loại giải pháp. Hóa ra là một không khép kín một vấn đề tag.Try validate HTML của bạn, giải pháp có thể là một thẻ không khép kín gây

Tôi đã gặp sự cố này khi sử dụng Bootstrap + biểu mẫu liên hệ 7. Vì lý do nào đó, tôi đã đặt nhãn làm vùng chứa của biểu mẫu và đó là vấn đề không thể chọn trên thiết bị di động.

<label>
    <contact form>...</contact form>
</label>

Dường như phá vỡ tất cả các đầu vào ngoại trừ đầu vào đầu tiên và lần gửi.

Tôi gặp vấn đề tương tự và cách khắc phục là xóa trình giữ chỗ và tôi đã thay đổi thiết kế của biểu mẫu để sử dụng nhãn thay vì trình giữ chỗ ...

Tôi gặp sự cố này do một loại divphần tử có bootstrap chồng chéo lên phần tử class ="row""anh em" divvới phần tử class="col"đầu tiên ẩn tiêu điểm của divphần tử thứ hai .

Tôi đã giải quyết việc lấy bên ngoài div rowphần tử từ mức đó của cây divs và do đó, cân bằng lại hệ thống phân cấp logic bootstrap dựa trên các lớp rowvà col.

Tôi vừa gặp vấn đề này trong React.

Tôi đã tìm ra điều đó trong Bộ định tuyến, Tuyến đường. Chúng tôi không thể làm điều này vì nó gây ra sự cố đóng bàn phím di động.

<Route 
 path = "some-path"
 component = {props => <MyComponent />}
 />

Đảm bảo và sử dụng kết xuất thay thế trong tình huống này

<Route 
 path = "some-path"
 render = {props => <MyComponent />}
 />

Hy vọng điều này sẽ giúp ai đó

Daniel