input text

HTML input text 文字輸入欄位用來讓網友輸入文字

<pre><bb>input type="text"</bb> <<c>input type="text" size="20" value="123456" /> <input type="text" size="20" value="123456" /> <hr> <<c>input type="text" size="20" value="123456" <r>onclick="this.select()"</r> /> <input type="text" size="20" value="123456" onclick="this.select()" /> <hr> <<c>input type="text" size="20" value="123456" <r>onchange="this.select()"</r><b> onclick="this.select()"</b> /> <input type="text" size="20" value="123456" onchange="this.select()" onclick="this.select()" /> <hr> <<c>input type="text" size="20" value="123456" <r>maxlength="10"</r>/> <input type="text" size="20" value="123456" maxlength="10"/> <hr> <<c>input type="text" size="20" value="123456" <r>readonly</r> /> <input type="text" size="20" value="123456" readonly /> <hr> <<c>input type="text" size="20" value="123456" <r>disabled</r> /> <input type="text" size="20" value="123456" disabled /> </pre> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><bb>input </bb> <<c>input <r>type="password"</r> size="20" value="123456" /> <input type="password" size="20" value="123456" /> <hr> <<c>input <r>type="number"</r> size="20" value="123456" /> <input type="number" size="20" value="123456" /> <hr> <<c>input type="password" size="20" value="123456" <r>onmouseover="this.select()"</r> <b>onmouseout="this.blur();"</b> /> <input type="password" size="20" value="123456" onmouseover="this.select()" onmouseout="this.blur();" /> <hr> <<c>input type="date"> <input type="date"> <hr> <<C>input type="month" > <input type="month" > <hr> <<c>input type="datetime-local"> <input type="datetime-local"> <hr> <<c>input type="time" > <input type="time" > </pre> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><bb>input </bb> <<c>form action="demo_form.asp"> Quantity (between 1 and 5): <<c>input max="5" min="1" name="quantity" type="number" /> <<c>/form> <form action="demo_form.asp"> Quantity (between 1 and 5): <input max="5" min="1" name="quantity" type="number" /> </form> <hr> <<c>form action="demo_form.asp"> <<c>input type="email" /><<c>/form> <form action="demo_form.asp"> <input type="email" /></form> <hr> <<c>input type="file" multiple > <input type="file" multiple > </pre> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

00

input radio

input radio/Checkboxes 選擇框

<label class="container"> <input type="radio" name="S1" checked >One</label><br> <label class="container"> <input type="radio" name="S1">Two</label><br> <label class="container"> <input type="radio" name="S1">Three</label><br> <label class="container"> <input type="radio" name="S1">Four</label><br> <style> .container { cursor: pointer; font-size: 22px; } </style> <pre> <<c>label class="container"> <<c>input type="radio" <r>name="S1"</r> checked>One<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" <r>name="S1"</r> >Two<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" <r>name="S1"</r> >Three<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" <r>name="S1"</r> >Four<<c>/label><c><br> <<c>style> .container { cursor: pointer; font-size: 22px; } <<c>/style></pre> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

<label class="container"> <input type="radio" checked >One</label><br> <label class="container"> <input type="radio" >Two</label><br> <label class="container"> <input type="radio" >Three</label><br> <label class="container"> <input type="radio" >Four</label><br> <style> .container { cursor: pointer; font-size: 22px; } </style> <pre> <<c>label class="container"> <<c>input type="radio" checked>One<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" >Two<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" >Three<<c>/label><<c>br> <<c>label class="container"> <<c>input type="radio" >Four<<c>/label><c><br> <<c>style> .container { cursor: pointer; font-size: 22px; } <<c>/style></pre> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

You select <span id="dp">?</span> <br> <label class="container"> <input type="radio" name="S1" value="1" >1</label> <label class="container"> <input type="radio" name="S1" value="2">2</label> <label class="container"> <input type="radio" name="S1" value="3">3</label> <label class="container"> <input type="radio" name="S1" value="4">4</label> <script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { //true false round.checked=false;return round.addEventListener("click", function() { if(round.value== dp.innerHTML){ round.checked=false ; dp.innerHTML = "?";return } dp.innerHTML = round.value ; }) }) </script> <pre> <<c>script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("click", function() { if(round.value== dp.innerHTML){ round.checked=false ; dp.innerHTML = "?";return } dp.innerHTML = round.value ; }) }) <</c>/script> </pre> <style> .container { cursor: pointer; font-size: 22px; padding-left: 20px; } </style> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

You select <span id="dp1"> 1 </span> <span id="dp2"> 2 </span> <span id="dp3"> 3 </span> <span id="dp4"> 4 </span> <br> <label class="container"> <input type="radio" value="1" >1</label> <label class="container"> <input type="radio" value="2">2</label> <label class="container"> <input type="radio" value="3">3</label> <label class="container"> <input type="radio" value="4">4</label> <script> dp1.style.opacity=0.3; dp2.style.opacity=0.3; dp3.style.opacity=0.3; dp4.style.opacity=0.3; dp1.style.textDecoration = "line-through"; dp2.style.textDecoration = "line-through"; dp3.style.textDecoration = "line-through"; dp4.style.textDecoration = "line-through"; var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("click", function() { var TT =document.getElementById("dp"+round.value) ; if(TT.style.opacity == 0.3){ TT.style.opacity=1; TT.style.textDecoration = "initial"; } else{ TT.style.opacity=0.3; round.checked=false ; TT.style.textDecoration = "line-through"; } }) }) </script> <pre> <<c>script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("click", function() { var TT =document.getElementById("dp"+round.value) ; if(TT.style.opacity == 0.3){ TT.style.opacity=1; TT.style.textDecoration = "initial"; } else{ TT.style.opacity=0.3; round.checked=false ; TT.style.textDecoration = "line-through"; } }) }) <</c>/script> </pre> <style> .container { cursor: pointer; font-size: 22px; padding-left: 20px; } #dp1 ,#dp2 ,#dp3 ,#dp4 { padding-left: 20px; text-decoration : LINE-THROUGH; opacity:0.3} </style> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style>

00

input radio/Checkboxes 選擇框

Edit

#html #網頁格式 #script #style #div #html input radio #html 選擇框

input Checkboxes

input radio/Checkboxes 選擇框

<label class="container"> <input type="checkbox" checked="checked">One</label><br> <label class="container"> <input type="checkbox">Two</label><br> <label class="container"> <input type="checkbox">Three</label><br> <label class="container"> <input type="checkbox">Four</label><br> <style> .container { cursor: pointer; font-size: 22px; } </style> <pre><<c>label class="container"> <<c>input type="checkbox" checked="checked">One<<c>/label><<c>br> <<c>label class="container"> <<c>input type="checkbox">Two<<c>/label><<c>br> <<c>label class="container"> <<c>input type="checkbox">Three<<c>/label><<c>br> <<c>label class="container"> <<c>input type="checkbox">Four<<c>/label><c><br> <<c>style> .container { cursor: pointer; font-size: 22px; } <<c>/style></pre> <style> input {cursor:pointer;} pre{position:fixed ; top:10px ; left:100px;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style

00

<label class="container" > <input type="checkbox" checked="checked">One</label> <label class="container"> <input type="checkbox" >Two</label> <label class="container"> <input type="checkbox" >Three</label> <label class="container"> <input type="checkbox" >Four</label> <style> .container { cursor: pointer; padding-left: 30px; font-size: 22px; } </style> <pre> <<c>label class="container"> <<c>input type="checkbox" checked="checked">One<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Two<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Three<<c>/label> <<c>label class="container"> <<c>input type="checkbox" >Four<<c>/label> <<c>style> .container { cursor: pointer; padding-left: 30px; font-size: 22px; } <<c>/style> </pre> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style

00

<style> input[type="checkbox"]:checked ~ span{ color: red;} label {cursor:pointer;padding-left: 20px;font-size: 22px;} </style> <label> <input type="checkbox" > <span>One</span></label> <label> <input type="checkbox" > <span>Two</span></label> <label> <input type="checkbox" > <span>Three</span></label> <label> <input type="checkbox" > <span>Four</span></label> <pre> <<c>style> input[type="checkbox"]:checked ~ span{ color: red;} label {cursor:pointer;padding-left: 20px; font-size: 22px;} <<c>/style> <<c>label> <<c>input type="checkbox" > <<c>span>One<<c>/span><<c>/label> <<c>label> <<c>input type="checkbox" > <<c>span>Two<<c>/span><<c>/label> <<c>label> <<c>input type="checkbox" > <<c>span>Three<<c>/span><<c>/label> <<c>label> <<c>input type="checkbox" > <<c>span>Four<<c>/span><<c>/label></pre> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style

00

<style> .container { display: block; /* 垂直 */ position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; } .container input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container:hover input ~ .checkmark { background-color: #ccc;} .container input:checked ~ .checkmark { background-color: #2196F3;} .checkmark:after { content: ""; position: absolute; display: none; } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} </style> <label class="container">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="container">Two <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container">Three <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container">Four <input type="checkbox"> <span class="checkmark"></span> </label>

00

<style> .container { position: relative; /* 橫向 */ margin-right: 30px; /* 橫向 */ padding-left: 35px; /* 選擇框 字距 */ cursor: pointer; /* 滑鼠游標手型 */ font-size: 22px; } /* 字 大小 */ .container input { position: absolute; /* 隱藏原有選擇框 */ opacity: 0; cursor: pointer; } .checkmark { position: absolute; /* 自加選擇框 */ top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container:hover input ~ .checkmark{background-color: #ccc;} /*滑鼠改色*/ .container input:checked ~ .checkmark{ background-color: #2196F3;}/*選擇後色*/ .checkmark:after { content: ""; position: absolute; display: none; } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} </style> <label class="container">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="container">Two <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container">Three <input type="checkbox"> <span class="checkmark"></span> </label> <label class="container">Four <input type="checkbox"> <span class="checkmark"></span> </label>

00

Edit

#html #網頁格式 #script #style #div #html input Checkboxes #html 選擇框

input range

input range option label
input range拖動實時觸發事件

<datalist id="tickmarks"> <option value="0" >0</option> <option value="20">20</option> <option value="40">40</option> <option value="60">60</option> <option value="80">80</option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <span id="volumeBox" >50</span> <pre> <<c>datalist id="tickmarks"> <<c>option value="0" > 0 <<c>/option> <<c>option value="20"> 20 <<c>/option> <<c>option value="40"> 40 <<c>/option> <<c>option value="60"> 60 <<c>/option> <<c>option value="80"> 80 <<c>/option> <<c>option value="100">100<<c>/option> <<c>/datalist> <<c>input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <<c>span id="volumeBox" >50<<c>/span> <<c>style> input { width:400px } <<c>style> </pre> <style> input { width:400px } <style> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style

00

<datalist id="tickmarks"> <option value="0" > 0 </option> <option value="20"> 20 </option> <option value="40"> 40 </option> <option value="60"> 60 </option> <option value="80"> 80 </option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <span id="volumeBox" >50</span> <style> input[type=range]{ writing-mode: bt-lr; /* IE */ -webkit-appearance: slider-vertical; /* WebKit */ width: 30px; height: 300px; } </style> <pre> <<c>datalist id="tickmarks"> <<c>option value="0" > 0 <<c>/option> <<c>option value="20"> 20 <<c>/option> <<c>option value="40"> 40 <<c>/option> <<c>option value="60"> 60 <<c>/option> <<c>option value="80"> 80 <<c>/option> <<c>option value="100">100<<c>/option> </datalist> <<c>input type="range" step="10" list="tickmarks" oninput="volumeBox.innerHTML=this.value"> <<c>span id="volumeBox" >50<<c>/span> <<c>style> input[type=range]{ writing-mode: bt-lr; /* IE */ -webkit-appearance: slider-vertical; /* WebKit */ width: 30px; height: 300px; } <<c>/style> </pre> <style> pre{position:fixed ; top:10px ; left:150px;} input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:30px;color:blue;} r{font-size:20px;color:red;} </style

00

<div id="co"> <style> #range { width:200px;border: 1px solid black; transform-origin: 100px 100px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } #range input { width:99%;margin: -15px 0 0 0;height:55px;} #volumeBox { width:410px;font-size: 15px; margin: -25px 0 0 200px; transform-origin: -210px -165px; transform: rotate(90deg); position: absolute; } #tickmarks { width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px; transform-origin: 10px 10px; transform: rotate(90deg); } </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"> <span id="volumeBox" >50</span> </div> <script> function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script> </div>

00

<!DOCTYPE html> <style> #range { width:400px;border: 1px solid black;} #range input { width:99%;margin: 0 0 0 0;height:20px;} #tickmarks{ width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px;} </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"> <span id="volumeBox" >50</span> <div> <script> function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script>

00

<!DOCTYPE html> <style> #range { width:400px;border: 1px solid black;} #range input {width:99%;-webkit-appearance: none; background: rgba(0%,0%,0%,0); margin: 0 0 0 0;display: flex;height:20px;} #tickmarks{ width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px;} input[type=range]:focus { outline: none;} /* --------------- Google Chrome ------------------ */ #range input::-webkit-slider-runnable-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D; } #range input::-webkit-slider-thumb { border: 3px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:25px; width: 20px; cursor: pointer; -webkit-appearance: none;margin: -15px 0 0 0;} /* --------------- Firefox ------------------ */ #range input::-moz-range-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D } #range input::-moz-range-thumb { border: 3px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:25px; width: 10px; cursor: pointer; -moz-appearance: none;} /* --------------- Microsoft Edge ------------------ */ input[type=range]::-ms-track { width: 100%; height: 3px; background: #fff; border: 1px solid #39404D;} #range input::-ms-thumb { border: 1px solid black; border-radius:50px 50px 0px 0px; background-color: coral; height:20px; width: 15px; cursor: pointer; margin: 1px 0 0 0; -webkit-appearance: none;} #range input::-ms-fill-lower { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } #range input::-ms-fill-upper { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"> <span id="volumeBox" >50</span> <div> <script> function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script>

00

<!DOCTYPE html> <style> #range { width:400px;border: 1px solid black;} #range input {width:99%;-webkit-appearance: none; background: rgba(0%,0%,0%,0); margin: 0 0 0 0;display: flex;height:20px;} #tickmarks{ width:103%;margin: 0 0 0 0;display: flex;} #tickmarks option{width:410px;font-size: 15px;} #range input:focus { outline: none;} /* --------------- Google Chrome ------------------ */ #range input::-webkit-slider-runnable-track { width: 100% ; height: 3px; background: #fff; border: 1px solid #39404D; } #range input::-webkit-slider-thumb { width: 0 ; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #232323; cursor: pointer; -webkit-appearance: none; margin: -15px 0 0 0;} /* --------------- Firefox ------------------ */ #range input::-moz-range-track { width: 0 ; height: 0; } #range input::-moz-range-thumb { width: 0 ; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #232323; cursor: pointer; -webkit-appearance: none ; margin: -15px 0 0 0;} /* --------------- Microsoft Edge ------------------ */ #range::-ms-track { width: 100% ; height: 3px; background: #fff ; border: 1px solid #39404D;} #range input::-ms-thumb { width: 0 ; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #232323; cursor: pointer; -webkit-appearance: none; margin: 7px 0 0 0;} #range input::-ms-fill-lower { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } #range input::-ms-fill-upper { background: #fff;height:2px; border: 1px solid #39404D; border-radius: 2px; } </style> <div id="range"> <datalist id="tickmarks"> <option value="0" >0</option> <option value="10"></option> <option value="20">20</option> <option value="30"></option> <option value="40">40</option> <option value="50"></option> <option value="60">60</option> <option value="70"></option> <option value="80">80</option> <option value="90"></option> <option value="100">100</option> </datalist> <input type="range" step="10" list="tickmarks" oninput="showVal(this.value)"> <span id="volumeBox" >50</span> <div> <script> function showVal(newVal){ document.getElementById("volumeBox").innerHTML=newVal; } </script>

00

Edit

#html input range option label #html input range拖動實時觸發事件

input Number Key

input Number Key only
input 僅輸入數字鍵

<pre><b>input Number Key only input 僅輸入數字鍵</b> <<c>input type="text" <r>onkeyup</r>="CT(this)"> <<c>script> function CT(x) { var ls = x.value.substr(-1) ; if(ls.charCodeAt(0) >= 42 && ls.charCodeAt(0)<= 57){return } x.value=x.value.substr( 0,x.value.length-1 ) } <<c>/script> input only [0 to 9] , [+ - * /]</pre> <script> function CT(x) { var ls = x.value.substr(-1) ; if(ls.charCodeAt(0) >= 42 && ls.charCodeAt(0)<= 57){return } x.value=x.value.substr( 0,x.value.length-1 ) } </script> <input type="text" onkeyup="CT(this)"> <div id="DP"></div> <style> input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:25px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><b>input Number Key only input 僅輸入數字鍵</b> <<c>input type="text" <r>onkeypress</r>="return isNumberKey(event)" > <<c>script> function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode >= 42 && charCode <= 57){return true;} if (charCode == 13){return true;} return false; } <<c>/script> input only [0 to 9] , [+ - * /]</pre> <script> function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode if (charCode >= 42 && charCode <= 57){return true;} if (charCode == 13){return true;} return false; } </script> <input type="text" onkeypress="return isNumberKey(event)" > <style> input:focus {background-color: yellow} input {background-color: lime } pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } b{font-size:25px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><bb>input on mouseove</bb> <input type="text" size="20" value="11" /> <input type="text" size="20" value="22" /> <input type="text" size="20" value="33" /> <input type="text" size="20" value="44" /> <input type="text" size="20" value="55" /> <<c>script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("mouseover", function() { round.select() ; }) }) <<c>/script> </pre> <script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("mouseover", function() { round.select() ; }) }) </script> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

00

<pre><bb>Activate the next input field 激活下一個輸入字段</bb> <input type="text" size="20" value="11" /> <input type="text" size="20" value="22" /> <input type="text" size="20" value="33" /> <input type="text" size="20" value="44" /> <input type="text" size="20" value="55" /> <div id="dp"></div> <<c>script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("keypress", function(e) { if(e.key == "Enter"){ var ii = [...Tag].indexOf(event.target); if(ii > Tag.length-2){ii=-1} Tag[ii+1 ].select() } }) }) <<c>/script> </pre> <script> var Tag= document.querySelectorAll("input") ; Tag.forEach((round) => { round.addEventListener("keypress", function(e) { if(e.key == "Enter"){ var ii = [...Tag].indexOf(event.target); if(ii > Tag.length-2){ii=-1} Tag[ii+1 ].select() } //dp.innerHTML =e.key ; //dp.innerHTML = Tag.length ; //dp.innerHTML = [...Tag].indexOf(event.target) //dp.innerHTML = [...Tag].indexOf(event.target) ; //const index = [...form].indexOf(event.target) }) }) </script> <style> input {cursor:pointer;} pre { font-size: 20px ; white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } bb{font-size:25px;color:blue;font-weight : bold;} b{font-size:20px;color:blue;} r{font-size:20px;color:red;} </style>

00

Edit

#html #網頁格式 #script #div #input #input 僅輸入數字鍵 #input Number Key only