Java程式教學甘仔店: 10月 2013

2013年10月19日星期六

[JavaScript]取得input的value

[JavaScript]取得input的value

有各種方法來獲得輸入文本框的值：

方法 1:
使用 id 名稱來取：
document.getElementById('input text id').value
返回input的value

範例： document.getElementById("searchTxt").value;

方法 2:

使用 class 名稱來取：
document.getElementsByClassName('input text class_name')[取第幾個].value
返回多筆input的為list

範例：
取回第一筆資料
document.getElementsByClassName("searchField")[0].value;

方法 3:

使用 html tag 名稱來取：
document.getElementsByTagName('tag_name')[取第幾個].value
返回多筆input的為list

範例：
取回第一筆資料
document.getElementsByTagName("input")[0].value;

方法 4:
使用 name 名稱來取：
document.getElementsByName('name')[取第幾個].value

範例：
取回第一筆資料
document.getElementsByName("searchTxt")[0].value;

方法 5:

使用選擇器(selector)
document.querySelector('selector').value

範例：
selected by id
document.querySelector('#searchTxt').value;
selected by class
document.querySelector('.searchField').value;
selected by tagname
document.querySelector('input').value;
selected by name
document.querySelector('[name="searchTxt"]').value;

方法 6:

document.querySelectorAll('selector')[取第幾個].value

範例：
selected by id
document.querySelectorAll('#searchTxt')[0].value;
selected by class
document.querySelectorAll('.searchField')[0].value;
selected by tagname
document.querySelectorAll('input')[0].value;
selected by name
document.querySelectorAll('[name="searchTxt"]')[0].value;

支持

Browser 方法 1 方法 2 方法 3 方法 4 方法 5/6
IE6 Y(Buggy) N Y Y(Buggy) N
IE7 Y(Buggy) N Y Y(Buggy) N
IE8 Y N Y Y(Buggy) Y
IE9 Y Y Y Y(Buggy) Y
FF3.0 Y Y Y Y N
FF3.5/FF3.6 Y Y Y Y Y
FF4b1 Y Y Y Y Y
GC4/GC5 Y Y Y Y Y
Safari4/Safari5 Y Y Y Y Y
Opera10.10/
Opera10.53/ Y Y Y Y(Buggy) Y
Opera10.60
註：
IE=Internet Explorer
FF=Mozilla Firefox
GC=Google Chrome
Y=YES,N=NO

有用的鏈接：

要看到這些方法的支持，所有的錯誤，包括更多的細節，點擊這裡 http://quirksmode.org/dom/core/
靜態和實時節點列表之間的區別，請點擊這裡 http://www.nczonline.net/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall/

參考
http://stackoverflow.com/questions/11563638/javascript-get-input-text-value

其它文章

[JavaScript]JavaScript過濾特別的字元

過濾特別的字元，使用Regular Expression (RegExp) in JavaScript

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Regular Test</title>
<script type="text/javascript">
function filterChar(pNameStr,pReplaceStr){
// ======================================================================================='
// 功能說明: 過濾特別的字元，使用Regular Expression (RegExp) in JavaScript
// 預設改為字元為 "" 無字元
// 這些逃脫字元有: -[]/{}()*+=?.,\\^$|~#%&'"\!@;:<>_`
// 有過濾空白
// Regular code: /[\ \-\[\]\/\{\}\*\+\=\?\.\,\\\^\$\|\~\#\%\&\'\"\!\@\;\:\<\>\_\`]/g
// 傳入參數:
// pNameStr : 要過濾的來源字串'
// pReplaceStr : 要取代為什麼字元。
// 傳回參數:
// Error : Return false
// Success : Return 過濾完成的字串。
//
// 用法： filterChar("abc123 ~!@#$%^&*(){}[]`/=?+\|-_;:'\",<.> 123654"))
// filterChar("abc123 ~!@#$%^&*(){}[]`/=?+\|-_;:'\",<.> 123654","_"))
//
// Referring: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/regexp
//
// author levin
// 日期：2013/04/22
// ====================================================================================='

var specials = [
" "
, "-"
, "["
, "]"
, "/"
, "{"
, "}"
, "("
, ")"
, "*"
, "+"
, "="
, "?"
, "."
, ","
, "\\"
, "^"
, "$"
, "|"
, "~"
, "#"
, "%"
, "&"
, "'"
, "\""
, "!"
, "@"
, ";"
, ":"
, "<"
, ">"
, "_"
, "`"
];
var regex = RegExp('[' + specials.join('\\') + ']', 'g');
var replaceStr = "";
if(null != pReplaceStr){
replaceStr = pReplaceStr;
};
var str = pNameStr;
str = str.replace(regex,replaceStr);
return str;
}
</script>
</head>
<body>
<label for="name">測試過瀘的資料，輸入資料：</label>
<input name="replaceData" id="replaceData" type="text" value="" />
<button onclick="document.getElementById('return').innerHTML=filterChar(document.getElementById('replaceData').value)">過瀘</button>
<p id="return"></p>
</body>
</html>




Regular Test



 測試過瀘的資料，輸入資料：

其它文章

2013年10月18日星期五

[遊戲]打開瀏覽器也能玩「超級瑪利」

來玩超級瑪利按下此連結：超級瑪利網頁版

參考來源：
http://www.bnext.com.tw/article/view/id/29666#.UmFNkvCwA_Q.facebook
http://mashable.com/2013/10/14/super-mario-bros-browser/

其它文章

Java、Spring 、Hibernate、HTML/CSS、MySQL、jQuery、PHP、C/C++…等，學徒程式開發設計學習: [JAVA_IDE]Decompiler反組譯-Eclipse套件及使用GUI程式反組譯

Java、Spring 、Hibernate、HTML/CSS、MySQL、jQuery、PHP、C/C++…等，學徒程式開發設計學習: [JAVA_IDE]Decompiler反組譯-Eclipse套件及使用GUI程式反組譯: Java Decompiler 使用GUI程式反組譯官網-使用Eclipse反組譯 Add a new repository to add JD-Eclipse plug-in: Click on the Add... button t...

其它文章

[CSS] CSS 基本

(一)CSS 基本套用樣式

1. 行內套用 (Inline Style Sheets)
<h2 style=color:blue;font-family:"標楷體">......</h2>

2. 整頁套用 (Embedding Style Sheets)
在<head></head>之間宣告與套用
<style type="text/css">
h2 {
color:blue
}
</style>

3. 外部套用(External Style Sheets)
外部套用的宣告也是在head區段中, 有下列二種方法
(A) 連結(Linking Style Sheets)
<link rel=stylesheet type="text/css" href="../main.css">
(B) 外部匯入(Import Style Sheets)
<style>
@import url("../main.css");
</style>

(二)CSS 規則

樣式規則(rule) = 選擇子 {宣告} = Selector(選取器,html標籤) { property(屬性) : value(設定值) }
1.選擇子(Selector)：通常為文件中的元素(element)，如html中的body, p, strong等標籤，多個選擇子可以逗號隔開。

2.屬性(property)：CSS1 / CSS2 / CSS3 規定了許多的屬性，目的在控制選擇子的樣式。

3.值(value)：指屬性接受的設定值，可由各種關鍵字(keyword)組成，多個關鍵字時大都以空格隔開。

4.要針對沒有標籤定義範圍進行樣式設定時，可利用 <div> 與 <span> 標籤

5.選擇子的種類
(A) 類別選擇子(class selector)：可多次套用
(B) 識別選擇子(ID selector)：每一個網頁只能有一個唯一的ID可以套用樣式, 多用於版面配置或搭配程式
(C) 脈絡選擇子(contextual selector) ：依指定的樹狀架構套用樣式
(D) 利用CSS的position進行元素位置的定位，可將文書架構與編排配置定義分離(W3C強烈建議)

6.CSS的顏色
(A) 可用的顏色名稱(color-name)：aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white, yellow
(B) 顏色值的設定(color-value)：紅綠藍( rgb)的16進位表示法： #336699, #369, rgb(51,102,153), rgb(30%,60%,100%)

7.CSS設定值的度量單位

CSS單位	代表英文	說明
px	pixel	像素 (相對)
pt	point	dpi,像素,1/72英吋 (相對於螢幕解析度)
pc	pica	點 (絕對)
em	em	字型的主體大小 (相對)
ex	x-height	小寫"x"字母的高度 (相對)
in	inch	英吋 (絕對)
cm	centimeter	公分 (絕對)
mm	millimeter	公厘 (絕對)