溫故之輸入框總結

時間 2019-11-12

標籤溫故輸入總結简体版

原文原文鏈接

　　寫在前面：不忘初心，方得始終；還記得最初進入前端的時候，一個標籤一個節點都會兢兢業業，虔誠謹慎的去對待，慢慢的，隨着時間的流逝，也不知是受公司氛圍的影響仍是本身變得懶惰，變得不多去在乎那些細節，項目中用到了，不知道就去查一下，過去了就過去了，下次遇到大部分狀況仍是要去查，總要踩過屢次坑纔會緊緊的記住；我一直不太喜歡開卷考試，我感受這樣的本身好像在開卷考試，而全部你須要掌握的東西都應該閉卷考試的，並且應該是融匯貫通的閉卷考試，只要是提綱內的內容，你應該可以信手拈來。工做應該是對你掌握的這些技術的昇華和創造新生，不然，即便你作出來了什麼也不過是依葫蘆畫瓢，就算畫出來了，也不是最合適的。在前進的過程當中，咱們應該一邊前進，一邊反思，學而不思則罔，思而不學則殆，不管何時，別讓本身成爲一潭死水！javascript

　　輸入框是一個應用中不可或缺的部分之一，它是實現交互的重要內容。輸入框有不一樣的輸入操做類型，input，textarea，CheckBox，radio，select等等，他們能夠幫助用戶實現不一樣類型的交互。可是在之前的開發過程當中，我一直都沒有重視這個部分，因此決定好好補一補。html

一，相關事件及其觸發條件：

onfocus 當input 獲取到焦點時觸發前端

onblur 當input失去焦點時觸發，注意：這個事件觸發的前提是已經獲取了焦點再失去焦點的時候會觸發相應的jsjava

onchange 當input失去焦點而且它的value值發生變化時觸發jquery

onkeydown 在 input中有鍵按住的時候執行一些代碼ios

onkeyup 在input中有鍵擡起的時候觸發的事件，在此事件觸發以前必定觸發了onkeydown事件瀏覽器

onclick 主要是用於 input type=button，當被點擊時觸發此事件服務器

onselect 當input裏的內容文本被選中後執行一段，只要選擇了就會觸發，不是非得所有選中app

oninput 當input的value值發生變化時就會觸發，不用等到失去焦點（與onchange的區別）函數

二，取值和設定默認值的相關操做：

$(function(){
    $('input:text').val('我是文本輸入框');//設定input類型爲text的元素的value值；
    $(':button').val('我是按鈕輸入框');//設置input類型爲button的元素的value值；
    $('select').val('2');//設置下拉框第二項爲選中項；
    $('select').find('option:contains("蘋果")').attr("selected",true);//設置optios文本爲香蕉的項爲選中項；
    $('select option')[1].selected = true;//設置select的選中項
//    $("select").empty();//清空select的選項
//    $("select").get(0).options.length = 0; //清空select的選項
    $("select").get(0).options.add(new Option('text','value'));//添加新項
    $("select").get(0).selectedIndex;//獲取選中項的索引
    alert($('select').val());//獲取選中項的值；
    alert($("select").find("option:selected").text());//獲取選中項的text
    $('input[name=items][checked]').val(); $('input[name=sex]').change(function(){ alert($('input[type=radio][checked]').length); });//選中一組radio中被選中項的值，只適用於初始化時已經選擇好的狀況 $('input[name=sex]').get(1).checked = true; //設定radio的第二項爲選中項 });

改變值的操做：主要藉助選擇器和.val()來操做，把值設置爲空也能夠達到清空值得做用；

　　$('input:text').val('我是文本輸入框');//設定input類型爲text的元素的value值；

　　$(':button').val('我是按鈕輸入框');//設置input類型爲button的元素的value值；

設定選中項的操做：select元素，當selected屬性爲true時即爲選中；radio和check則當checked等於checked時爲選中；須要注意的是，當使用屬性選擇器時，動態選擇的過程當中不能取到radio選中項的相關信息，由於默認切換方式不是經過改變checked來改變選中項的，全部選不中。此時須要根據本身操做中改變的內容去選擇對應選中項的信息；

　　$('select').val('2');//設置下拉框第二項爲選中項；

　　$('select').find('option:contains("蘋果")').attr("selected",true);//設置optios文本爲香蕉的項爲選中項；

　　$('select option')[1].selected = true;//設置select的選中項

　　$('input[name=sex]').get(1).checked = true;

清空項和添加新項：這裏列出的是jQuery專門爲select設置的添加方式，除此以外也可使用通用的append等方式來實現添加新項的功能；

　　$("select").empty();//清空select的選項

　　$("select").get(0).options.length = 0; //清空select的選項

　　$("select").get(0).options.add(new Option('text','value'));//添加新項

取選中項的值：取值通常經過val，索引是selectedIndex；

　　$("select").get(0).selectedIndex;//獲取選中項的索引

　　$('select').val();//獲取選中項的值；

　　$("select").find("option:selected").text();//獲取選中項的text；

　　$('input[name=items][checked]').val();

事件觸發：事件名稱小括號內用匿名函數實現時間被觸發時的對應操做；

　　$('input[name=sex]').change(function(){
　　　　alert($('input[type=radio][checked]').length);
　　});

三，這裏列一下我目前能想到的一些輸入類型，也包括部分我比較陌生的表單元素，而後逐一介紹，代碼下面是各類輸入框在瀏覽器中的展現截圖：

<!DOCTYPE html>
<html>
    <!--（請注意，文中邏輯代碼以及圖片等引用皆爲個人本地地址，若是要查看代碼記得替換相應地址，不然有可能顯示異常） -->
    <head>
        <meta charset="UTF-8">
        <title>練習</title>
        <script type="text/javascript" src="assets/js/jquery.min.js" ></script>
        <script type="text/javascript" src="new_file.js" ></script>
        <style>p{color: orange;}</style>
    </head>
    <body>
        <h3>input 輸入框</h3>
        <div>button：<input type="button" value="按鈕名稱"/></div>
        <p>type等於radio定義單選按鈕，若是指定兩個選項中只能選中一項，則name值必須相同，value不一樣。</p>
        <div>radio：<input type="radio" name="sex" value="1" /><input type="radio" name="sex" value="2" /></div>
        <p>type等於check定義多選按鈕，若是多個name值相同的選項，能夠選中多個。</p>
        <div>checkbox：<input type="checkbox" name="habbit" value="1"/><input type="checkbox" name="habbit" value="2"/></div>
        <div>color：<input type="color" value="color"/></div>
        <p>選取時間和日期的輸入類型，共有如下六種，提供不一樣的輸入形式：</p>
        <div>date：<input type="date" /></div>
        <div>datetime：<input type="datetime" /></div>
        <div>datetime-local：<input type="datetime-local" /></div>
        <div>week：<input type="week" /></div>
        <div>month：<input type="month" /></div>
        <div>time：<input type="time" /></div>
        <p>iPhone 中的 Safari 瀏覽器支持 email 輸入類型，並經過改變觸摸屏鍵盤來配合它（添加 @ 和 .com 選項）</p>
        <div>email：<input type="email" /></div>
        <div>file：<input type="file" /></div>
        <div>hidden：<input type="hidden" /></div>
        <p>image輸入框，會以src屬性指定的圖片來顯示按鈕樣式。</p>
        <div>image：<input type="image" src="assets/layui/images/face/47.gif" /></div>
        <p>用於輸入應該包含數值的輸入域，還可設置對所輸入的數字的限定</p>
        <div>number：<input type="number" min="1" max="10" /></div>
        <div>password：<input type="password" /></div>
        <p>用於應該包含必定範圍內數值的輸入域，range類型顯示爲滑動條，一樣也能夠對可接受的數字進行限定</p>
        <div>range：<input type="range" min="1" max="10" /></div>
        <div>reset：<input type="reset" /></div>
        <p>搜索域：</p>
        <div>search：<input type="search" /></div>
        <p>type等於submit定義提交表單數據到指定服務器的按鈕。</p>
        <div>submit：<input type="submit" /></div>
        <div>tel：<input type="tel" /></div>
        <div>text：<input type="text" /></div>
        <p>iPhone 中的 Safari 瀏覽器支持 url 輸入類型，並經過改變觸摸屏鍵盤來配合它（添加 .com 選項）。</p>
        <div>url：<input type="url" /></div>
        <h3>select輸入</h3>
        <p>select列表一般會把首個選項顯示爲被選選項，能夠經過添加selected屬性來設置預約義選項</p>
        <div>select:
            <select name="">
                <option value="1">蘋果</option>
                <option value="2">梨子</option>
                <option value="3" selected="selected">香蕉</option>
            </select>
        </div>
        <h3>textarea輸入</h3>
        <p>定義多行輸入字段：</p>
        <div>textarea:
            <textarea></textarea>
        </div>
        <h3>datalist :</h3>
        <div>datalist :
            <input type="url" list="url_list" name="link" />
            <datalist id="url_list">
                <option label="baidu" value="http://www.baidu.com.cn" />
                <option label="Google" value="http://www.google.com" />
                <option label="Microsoft" value="http://www.microsoft.com" />
            </datalist>
        </div>
        <h3>button定義可點擊按鈕:</h3>
        <div>button:
            <button type="button" onclick="alert('你居然敢單擊我！╭(╯^╰)╮')">我是按鈕</button>
        </div>
    </body>
</html>

時間有限，後期在作補充，錯誤之處歡迎批評指正。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。