當內部輸入爲焦點時Div改變邊框顏色（焦點狀態）

我在div中有兩個輸入，並設置tabindex=1使其可以聚焦。當內部輸入爲焦點時Div改變邊框顏色（焦點狀態）

<div class="wrapper" tabindex="1"> 
    <input class="input" type="text"> 
    <input class="input" type="text"> 
</div>

而且我SCSS：

div { 
    border: solid 1px lightgray; 
    padding:3px; 
    display: inline-block; 
    background-color: #fff; 
    &:focus { 
    outline: none; 
    border: solid 1px blue; 
    } 
} 
input { 
    border: solid 1px transparent; 
    &:focus { 
    outline: none; 
    border-bottom: solid 1px red; 
    } 
}

這樣，格不會當輸入是重點關注。所以，我使用jQuery來做到這一點。

(function($) { 
    $(".input").on("focus", function() { 
    $(this).parent("div").addClass("focus"); 
    }); 
    $(".input").on("focusout", function() { 
    $(this).parent("div").removeClass("focus"); 
    }); 
})(jQuery);

我不知道是否有更好的辦法，使這個？

Here是我的JSFiddle。

來源

2017-03-02 Cony LuLu

代碼已經實現了你正在嘗試做的事情。你想做什麼「更好」？你要加快速度，還是要保持易讀性？無論哪種方式，你的功能已經幾乎是最好的方式去做你想做的事情......或者你是否試圖在輸入焦點上改變'.wrapper'的邊界？ –

@ObsidianAge有沒有可能讓這個沒有js？是的，我試圖在輸入焦點上改變'.wrapper'的邊界。 –

爲什麼你想讓DIV可以聚焦？如果用戶選中該選項並將其顏色從灰色更改爲藍色，但用戶仍然無法輸入，直到他們再次選擇了一個他們看不到的輸入爲止。（另外，tabindex爲1會將其拉出標準標籤序列，這通常是一個壞主意。） – nnnnnn

當前選項卡選擇div（給它一個藍色邊框）。但是你不能在那裏輸入任何東西，所以你必須再次點擊標籤，這對我來說似乎毫無意義。所以我給了輸入的tabindex屬性，而不是包裝：

<div class="wrapper"> 
    <input class="input" tabindex="1" type="text"> 
    <input class="input" tabindex="2" type="text"> 
</div>

但除此之外，我不知道有什麼辦法讓包裝亮點，除了使用JavaScript，因爲你已經做了。

來源

2017-03-02 02:49:55

謝謝，我沒有想過這一點！起初，我只是想讓它具有焦點狀態（當輸入焦點，並在同一時間使div對焦）。 –

http://stackoverflow.com/a/1014958/1544886確認截至2017年2月沒有父母選擇器，所以JS是唯一的選擇（無論如何''焦點'''懸停'可以使用CSS滴答影響父元素。） –

當內部輸入爲焦點時Div改變邊框顏色（焦點狀態）

回答

相關問題