標籤彙整:input

【JavaScript】Event Listener 監聽事件一覽

用法

①透過特定event觸發動作

用法基礎篇

目標物.addEventListener("特定的event", 
 function(){
  //這邊寫要觸發的動作
 }
)

②操控目標元素完成某動作

用#button按鈕操控,讓超連結#theURL被點擊

a#theURL(href="ianchen.thisistap.com") 超連結
br
button(onclick="openURL()") click it and open the URL
//onclick的用法參見下方
function openURL(){
 theURL.click();
}

Display

超連結

③ON+EVENT名稱:用HTML直接呼叫 function

基礎範例

HTML用法:on+event名=”函式名()”
※如果要呼叫event的話,需要使用這種形式:on+event名=”函式名(event)”

【例如】click event & makeItBigger function
→onclick="makeItBigger()" 
//這個東西放在HTML tag裡面
//記得要另外寫makeItBigger這個函式

【上述用法等同】
id.eventListener("click", makeitBigger());

滑鼠相關監聽事件

  1. click event:滑鼠按下→觸發事件
  2. mousemove event:滑鼠移動→觸發事件
  3. mousedown event:滑鼠按下去的瞬間→觸發事件
  4. mouseout event:滑鼠離開→觸發事件
  5. mouseup event:滑鼠按下、離開的瞬間→觸發事件

打字相關監聽事件

  1. focus event:聚焦(點選到)該元素→觸發事件
    ※可以用滑鼠點選觸發focus,某些情況下也可以用鍵盤選取(Tab鍵),觸發focus
  2. blur event:focus的相反,離開該元素後→觸發事件
  3. keydown event:鍵盤按下時→觸發動作
  4. keyup event:鍵盤按下後鬆開→觸發動作
  5. input event:輸入文字→觸發動作

其他監聽事件

  1. transitionend event:漸變結束後→觸發事件
  2. change event:<input>狀態改變時→觸發事件
    【例】下拉式選單:變更選項→觸發事件
    【例】核取方塊:勾選 / 取消勾選→觸發事件

 

【JavaScript】input相關Method

value

偵測文字輸入框的內容

input#input(type="text")
br
#show
window.addEventListener("keyup", function(){
 show.textContent=`What you input is "${input.value}"`;
})

Display

What you input is

checked


監測核取方塊被點選的狀態。並且傳回布林值

input#checkbox(type="checkbox")
br
p#ckeckStatus
btn.addEventListener("click", function(){
 ckeckStatus.innerHTML=`ckecked status: ${checkbox.checked}`;
})

Display


Filter Control Panel

先備知識

範例

img(src='https://goo.gl/ESHnPA')
.text
 h2 Update CSS Variables with 
 span.h1 JS
 .controls
 //min最小值,max最大值
 //value初始值
 //data-sizing單位
 //step刻度單位 (default為1)
 label(for='spacing') Spacing
 input#spacing(type='range', name='spacing', min='10', max='200', value='10', data-sizing='px')
 .value 10px
 br
 
 label(for='blur') Blur
 input#blur(type='range', name='blur', min='0', max='25', value='1.5', step="0.01", data-sizing='px')
 .value 1.5px
 br
 
 label(for='brightness') Brightness
 input#brightness(type='range', name='brightness', min='0', max='1', step="0.01", value='1')
 .value 1
 br
 
 label(for='contrast') Contrast
 input#contrast(type='range', name='contrast', min='0', max='200', value='100', data-sizing='%')
 .value 100%
 br
 
 label(for='grayscale') Grayscale
 input#grayscale(type='range', name='grayscale', min='0', max='100', value='0', data-sizing='%')
 .value 0%
 br
 
 label(for='opacity') Opacity
 input#opacity(type='range', name='opacity', min='0', max='100', value='100', data-sizing='%')
 .value 100%
 br
 
 label(for='saturate') Saturate
 input#saturate(type='range', name='saturate', min='0', max='100', value='100', data-sizing='%')
 .value 100%
 br
 
 label(for='sepia') Sepia
 input#sepia(type='range', name='sepia', min='0', max='100', value='0', data-sizing='%')
 .value 0%
 br
 
 label(for='base') Base Color
 input#base(type='color', name='base', value='#ffc600')
 .value #ffc600
:root {
 --base: #ffc600;
 --spacing: 10px;
 --blur: 1.5px;
 --brightness: 1;
 --contrast: 100%;
 --grayscale: 0%;
 --opacity: 100%;
 --saturate: 100%;
 --sepia: 0%
}

* {
 font-family: Lato;
 box-sizing: border-box;
}

html, body {
 margin: 0;
 padding: 0;
 font-size: 0;
}

img {
 width: 100vw;
 height: 100vh;
 position: relative;
 padding: var(--spacing);
 background: var(--base);
 filter: blur(var(--blur)) brightness(var(--brightness)) contrast(var(--contrast)) grayscale(var(--grayscale)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia));
}

.text {
 position: absolute;
 top: 0;
 left: 30px;
 font-size: 20px;
 color: #24260f;
}

.h1 {
 color: var(--base);
}

label {
 width: 100px;
 display: inline-block;
 margin-top: 20px;
}


.value{
 display: inline;
}
const inputs=document.querySelectorAll(".controls input");
const
values=document.querySelectorAll(".value");

function handleUpdate(){
 const suffix =this.dataset.sizing || ""; 
 //等於這個↓
 const suffix2 =this.getAttribute("data-sizing") || "";
 //dataset is a object, contains all the data info 
 //call data-sizing or nothing
 
 //select css root and change the root css
 document.documentElement.style.setProperty(`--${this.name}`, this.value+suffix);
 
 /****************
 **參數值顯示功能**
 ****************/
 for(i=0;i<9;i++){
 values[i].textContent=inputs[i].value+(inputs[i].dataset.sizing|| "");
 
}
}

inputs.forEach(input => input.addEventListener("change", handleUpdate)) //when all the input value changed, execute handleUpdate function
inputs.forEach(input => input.addEventListener("mousemove", handleUpdate)) //continuously change the value

Display

CODEPEN

【CSS】input style

核取方塊

input(type="checkbox")

Display
這個框框只有對準,才能點進去

擴大核取範圍:外層包覆label

label
 input(type="checkbox")
 .box 只要點選框内任一處,都可以打勾上方框框
.box
 width: 200px
 height: 150px
 border: 1px solid #000

Display


 

點選後出效果

  1. 用HTML打一個input(type=”checkbox”)
  2. CSS打上input:checked
  3. 綜合上面label技巧,擴大選取範圍
  4. 找到要顯示特效的地方,寫進input:checked的兄弟元素或子元素裡面去
  5. 最後把核取方塊設成不顯示input { display: none }

範例

label
 input(type="checkbox")
 .box 
  h4 CLICK IT !!
.box
 background-color: #90a955
 width: 200px
 height: 150px
 display: flex
 justify-content: center
 align-items: center
 
h4
 color: #f2f2e9
 opacity: 0.2
 transition-duration: 0.5s
 
input:checked+.box
 & h4
  opacity: 1

input
 display: none

Display