標籤: css

Fix An invalid form control with name=’…’ is not focusable

今天在開發一個表單程式，表單一直無法發送，開始來找問題，開啟 Chrome 開發者工具，在 Console 面板中，每送出一次表單，就會出現一個這個訊息：

An invalid form control with name=’…’ is not focusable

原因是 Chrome 阻止設定為 required 的欄位隱藏

也對拉!! 必填欄位又隱藏起來，怎麼填？ 表單送出前會做一個簡單的表單驗證

這樣也不行：

<input type="text" style="display:none" required>

這樣當然也不行：

<input type="text" id="example" required>
<script>
	$('#example').hide();
</script>

這樣可以：

大概是原本就是隱藏欄位了，所以沒有特別去驗證

<input type="hidden" required>

解決方法：

開發者會去隱藏欄位當然是有原因的，有時候會因為條件判斷而顯示不同輸入欄位，例如：居住地下拉選單，但使用者可能住於國外，所以表單設計在下拉選單尾端加一個”海外”的選項，選擇了海外，就出現一個自行輸入的文字欄位，像這樣的需求其實蠻常見的，這些輸入欄位通常都只是隱藏起來，依照判斷來顯示，這種欄位當然有可能顯示出來就是必填，下方介紹幾個解決方法來解決這個問題。

novalidate

在 form 屬性加上 novalidate，關閉預設的表單驗證，表單內的所有欄位都不會進行驗證，除非有其他方式進行表單驗證，不然不建議這麼做。

<form novalidate>
    <input type="text" id="example" style="display:none" required>
    <input type="submit" value="submit">
</form>

jQuery prop(‘required’,true)

在顯示的時候，再加上 required，如此，不管隱藏的文字欄位顯示與否，表單都可以正確送出，文字欄位顯示時，就必須填寫。

<form>
    <input type="text" id="example" style="display:none">
    <input type="submit" value="submit">
</form>
<hr>
<input type="button" id="show" value="show">
<script>
$('#show').click(function(e){
	$('#example').css('display','block').prop('required',true);;
});
</script>

這是一個簡單的提示，實務上的做法就看大家如何發揮創意了

 [……]

閱讀更多

HTML5 a Tag 直接用手機撥電話的連結

在 a 標籤中 href 屬性中，開頭加上 tel:撥打的電話號碼 ，在手機上按下此連結會呼叫手機撥號的應用程式，並把電話輸入在電話欄中，非常方便，但要注意電話號碼格式，只能輸入數字

錯誤：02-2888-8888

正確：0228888888

<a href="tel:0228888888">聯絡我們</a>

 [……]

閱讀更多

HTML 錨點偏移 CSS and JS 兩種方法 (offset anchor tag link)

HTML提供了一個錨點連結的功能 (anchor tag link)，換頁或不換頁，都可以把瀏覽器卷軸自動捲到錨點位置，但如果網頁上方有一個黏頭的Header (sticky header)，RWD手機版本則習慣使用(sticky header)，Header 懸浮本文之上，可能會把錨點的元素內容遮蔽，這時我們則需要偏移(sticky header)的高度，避免錨點元素被遮蔽。[……]

閱讀更多

CSS Calc運算

終於是等到這個功能了，CSS3增加了Calc()這個function進行數值運算，大部分用於容器寬度或高度的計算，這讓CSS的開發更快、靈活度更高並增加重複使用的可能性，Calc()還有一個很棒的優點，可以針對不同單位進行運算。

支援運算：

+
加

–
減

*
乘

/
除

CSS Calc運算

下方範例可以得到欄位寬度，可用來製作自己的網格系統

.column-1 {
  width: calc( 100% / 1);
}

.column-2 {
  width: calc( 100% / 2);
}

.column-3 {
  width: calc( 100% / 3);
}

 不同單位運算

#element1 {
  width: calc(50% - 2em);
}

參考資料：

[……]

閱讀更多

CSS get an element use :nth-child() not :eq()

用 index 在重複元素中獲取一個元素

在 jQuery 是使用 :eq(2) ，雖然jQuery跟CSS選取器(selector)有很多相似之處，但還是有些差異，在CSS中要在重複元素中獲取一個元素是用偽類 :nth-child(2)

比如說我要指定定Apple 的樣式為紅色：

<div>
    <div id="bar1" class="foo">banana</div>
    <div id="bar2" class="foo">Apple</div>
    <div id="bar3" class="foo">Orange</div>
</div>

我們可以這麼做，都可以達到相同效果：

#bar2{
	color:red;
}
div.foo:nth-child(2){
	color:red;
}
.foo:nth-child(2){
	color:red;
}

同場加映

除了:nth-child()還有其他用在取得元素的偽類，都很常用到優

  • :first-child
  • :second-child
  • :third-child
  • :last-child
  • :nth-child

參考資料：

[……]

閱讀更多

CSS RWD 響應式斷點 @media 及常用尺寸速查

我常用的方法

這作法雖有違背行動優先的概念，但我實務上遇到比較多還是先做電腦版，再依照電腦版樣式改成手機版本，概念歸概念，能能解決問題的就是好方法，提供大家參考

行動優先-響應式斷點

介紹完我常用的斷點，也介紹一下比較正規的做法，下列這就是行動優先下的響應式斷點，先決定手機版樣式，再針對平板或電腦的樣式進行調整

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

Bootstrap 4 – RWD Layout

這是Bootstrap定義的斷點

https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints

WordPress Elementor CSS breakpoint

Refrence: https://v123.tw/wordpress-elementor-css-breakpoint/

[……]

閱讀更多

[懶人CSS陰影]還在用PS上陰影嗎？用CSS為你的圖片或色塊加一點變化！

在設計網頁時為了不要讓圖片或色塊死板板的，有的人會傻傻的先用Photoshop上陰影再以圖片的格式上傳，今天我們直接為圖片和色塊加上CSS吧。

CSS實在有許多好用之處，今天要來跟大家介紹小編做網站時常常使用的CSS box-shadow！

顏色從淺到深的陰影色塊

.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.card {
    background-color: #f5f5f5;
    border-radius: 2px;
    display: block;
    height: 300px;
    margin: 1rem;
    position: relative;
    width: 300px;
}
.card-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

特殊陰影處理

HTML

<div class="box effect1">
<h3>Effect 1</h3>
</div>

<div class="box effect2">
<h3>Effect 2</h3>
</div>

<div class="box effect3">
<h3>Effect 3</h3>
</div>

<div class="box effect4">
<h3>Effect 4</h3>
</div>

<div class="box effect5">
<h3>Effect 5</h3>
</div>

<div class="box effect6">
<h3>Effect 6</h3>
</div>

<div class="box effect7">
<h3>Effect 7</h3>
</div>

<div class="box effect8">
<h3>Effect 8</h3>
</div>

CSS

.box h3 {
    text-align: center;
    position: relative;
    top: 80px;
}

.box {
    width: 70%;
    height: 200px;
    background: #FFF;
    margin: 40px auto;
}


/*==================================================
 * Effect 1
 * ===============================================*/

.effect1 {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}


/*==================================================
 * Effect 2
 * ===============================================*/

.effect2 {
    position: relative;
}

.effect2:before,
.effect2:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.effect2:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}


/*==================================================
 * Effect 3
 * ===============================================*/

.effect3 {
    position: relative;
}

.effect3:before {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}


/*==================================================
 * Effect 4
 * ===============================================*/

.effect4 {
    position: relative;
}

.effect4:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    right: 10px;
    left: auto;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 15px 10px #777;
    -moz-box-shadow: 0 15px 10px #777;
    box-shadow: 0 15px 10px #777;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: r[......]
閱讀更多