JS前臺效果 - JavaShuo

function fixWidth(percent) {
return document.body.clientWidth * percent; //這裏你能夠本身作調整
}java

try..

<input type="text" id="txt">
<input type="button" onclick="check(txt.value)" value="check">
<script>
function check(s)
{
str=s.replace(/[^\uff00-\uffff]/g,)
if(str.length==0)alert("半角");
else alert(有全角);
}
</script>chrome

var strtmp = new string();
strtmp = "咱們是全角字符。wo men shi ban jiao zi fu.";

for (var i=0; i<strtmp.length; i++) {
if (strtmp.charcodeat(i) > 128)
window.alert("全角字符：" + strtmp.charat(i));
else
window.alert("半角字符：" + strtmp.charat(i));
}

express

只能輸入全角

<input onkeyup="value=value.replace(/[^\uff00-\uffff]/g,)" onbeforepaste="clipboarddata.setdata(text,clipboarddata.getdata(text).replace(/[^\uff00-\uffff]/g,))">
只能輸入半角
<input onkeyup="value=value.replace(/[^\u0000-\u00ff]/g,)" onbeforepaste="clipboarddata.setdata(text,clipboarddata.getdata(text).replace(/[^\u0000-\u00ff]/g,))">

/*************************************************************
名稱：issbccase
功能：判斷字符串中是否存在全角字符串
參數：source，源字符串；
返回：是否存在全角字符，true或false
*************************************************************/
function issbccase(source) {
if (source=="") {
return true;
}
var reg=/^[\w\u4e00-\u9fa5\uf900-\ufa2d]*$/;
if (reg.test(source)) {
return false;
} else {
return true;
}
}

button捕捉回車鍵

這樣點關閉的時候就不會彈出如當前窗口正試圖關閉的對話框了.

那麼怎麼樣當用戶點瀏覽器的最大化最小化關閉按鈕中的關閉按鈕時也彈出關閉的確認對話框呢?這樣:

1、在使用iframe的頁面，要操做這個iframe裏面的DOM元素能夠用：

contentWindow、contentDocument(測試的時候chrom瀏覽器，要在服務器環境下)

1.先獲取iframe裏面的window對象，再經過這個對象，獲取到裏面的DOM元素

ifr.contentWindow 這裏，返回的是iframe的window對象，因此後面能夠接着調用document方法，再接着調用getElementByTagName。那麼就能夠對iframe裏面的元素進行操做了。

2、在iframe本頁面，要操做這個iframe的父頁面的DOM元素（即嵌套這個iframe的頁面）能夠用：

window.parent、window.top(這裏的TOP是獲取的頂層，即有多層嵌套iframe的時候使用)

window.open不被攔截

@using (Ajax.BeginForm("UserInfo", "Heimingdan", new AjaxOptions { OnSuccess = "Success" }, new { id = "blAddForm", onkeydown = "if(event.keyCode==13){return false;}" }))

.LNav{ _margin-top:164px; position: fixed;_position: absolute;_top: expression(documentElement.scrollTop + "px");}

剛剛本身寫了一個判斷瀏覽器，而後推薦谷歌或者火狐瀏覽器使用

3.2 屏蔽鼠標右鍵
在body標籤里加上oncontextmenu=self.event.returnvalue=false

window.open("你的.htm", "","toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=yes,status=no,top=0,left=0")

window.open(www.32pic.com,"32pic","fullscreen=3,height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");

注：在body標籤里加上onbeforeunload="javascript:return false"（使不能關閉窗口）

//window.event.returnValue=false;(等效於false)//返回產生事件的按鈕的值，若是等於false，就是說這個事件永遠不會發生。

js控制文本框光標聚焦到文字後面

由於公司網站中內容的需求，回覆評論時須要顯示對方的暱稱，而且想要光標聚焦在暱稱後面，這樣就能夠直接輸入所寫的內容了，有比較好的用戶體驗。下面是我所用的代碼，也是從網上參考的：

function moveEnd(obj) {

obj.focus();

var len = obj.value.length;

if (document.selection) {

var sel = obj.createTextRange();

sel.moveStart('character', len);

sel.collapse();

sel.select();

} else if (typeof obj.selectionStart == 'number'

&& typeof obj.selectionEnd == 'number') {

obj.selectionStart = obj.selectionEnd = len;

}

JS 光標控制

ie6 ie7中input標籤隱藏邊框(border:none與border：0的異同)

今天作表單，直接表格裏面用input。後來由於使用戶看起來表單更像文稿，把邊框都去掉。按照習慣直接none。發現input text在IE6與IE7中邊框並無去掉（button類型的input有效果，邊框已被去掉）。

input[type=text]{ border:0; }/* 在全部input中類型是text的隱藏邊框，兼容 ie7 ff chrome */

border:none;與border:0;的區別體現有兩點：一是理論上的性能差別二是瀏覽器兼容性的差別。

【border:0;】把border設爲「0」像素雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用了內存值。

【border:none;】把border設爲「none」即沒有，瀏覽器解析「none」時將不做出渲染動做，即不會消耗內存值。

1. 對比border:0;與border:none;之間的區別在於有渲染和沒渲染，感受他們和display:none;與visibility:hidden;的關係相似，而對於border屬性的渲染性能對比暫時沒找測試的方法，雖然認爲他們存在渲染性能上的差別但也只能說是理論上。

2. 如何讓border:none;實現全兼容？只須要在同一選擇符上添加背景屬性便可

3.對於border:0;與border:none;我的更向於使用,border:none;，由於border:none;畢竟在性能消耗沒有爭議，並且兼容性可用背景屬性解決不足以成爲障礙。

webkit核心瀏覽器（Chrome，Safari等）中的textarea可拖動調整大小，文本域聚焦（onfocus）時邊框會變成黃色。
這些效果很炫，但炫不必定就有用，有時還會破壞總體的風格。好在用css可消除這些特效
CSS：

js鍵盤鍵值

keycode    8 = BackSpace BackSpace
keycode    9 = Tab Tab
keycode   12 = Clear
keycode   13 = Enter
keycode   16 = Shift_L
keycode   17 = Control_L
keycode   18 = Alt_L
keycode   19 = Pause
keycode   20 = Caps_Lock
keycode   27 = Escape Escape
keycode   32 = space space
keycode   33 = Prior
keycode   34 = Next
keycode   35 = End
keycode   36 = Home
keycode   37 = Left
keycode   38 = Up
keycode   39 = Right
keycode   40 = Down
keycode   41 = Select
keycode   42 = Print
keycode   43 = Execute
keycode   45 = Insert
keycode   46 = Delete
keycode   47 = Help
keycode   48 = 0 equal braceright
keycode   49 = 1 exclam onesuperior
keycode   50 = 2 quotedbl twosuperior
keycode   51 = 3 section threesuperior
keycode   52 = 4 dollar
keycode   53 = 5 percent
keycode   54 = 6 ampersand
keycode   55 = 7 slash braceleft
keycode   56 = 8 parenleft bracketleft
keycode   57 = 9 parenright bracketright
keycode   65 = a A
keycode   66 = b B
keycode   67 = c C
keycode   68 = d D
keycode   69 = e E EuroSign
keycode   70 = f F
keycode   71 = g G
keycode   72 = h H
keycode   73 = i I
keycode   74 = j J
keycode   75 = k K
keycode   76 = l L
keycode   77 = m M mu
keycode   78 = n N
keycode   79 = o O
keycode   80 = p P
keycode   81 = q Q at
keycode   82 = r R
keycode   83 = s S
keycode   84 = t T
keycode   85 = u U
keycode   86 = v V
keycode   87 = w W
keycode   88 = x X
keycode   89 = y Y
keycode   90 = z Z
keycode   96 = KP_0 KP_0
keycode   97 = KP_1 KP_1
keycode   98 = KP_2 KP_2
keycode   99 = KP_3 KP_3
keycode 100 = KP_4 KP_4
keycode 101 = KP_5 KP_5
keycode 102 = KP_6 KP_6
keycode 103 = KP_7 KP_7
keycode 104 = KP_8 KP_8
keycode 105 = KP_9 KP_9
keycode 106 = KP_Multiply KP_Multiply
keycode 107 = KP_Add KP_Add
keycode 108 = KP_Separator KP_Separator
keycode 109 = KP_Subtract KP_Subtract
keycode 110 = KP_Decimal KP_Decimal
keycode 111 = KP_Divide KP_Divide
keycode 112 = F1
keycode 113 = F2
keycode 114 = F3
keycode 115 = F4
keycode 116 = F5
keycode 117 = F6
keycode 118 = F7
keycode 119 = F8
keycode 120 = F9
keycode 121 = F10
keycode 122 = F11
keycode 123 = F12
keycode 124 = F13
keycode 125 = F14
keycode 126 = F15
keycode 127 = F16
keycode 128 = F17
keycode 129 = F18
keycode 130 = F19
keycode 131 = F20
keycode 132 = F21
keycode 133 = F22
keycode 134 = F23
keycode 135 = F24
keycode 136 = Num_Lock
keycode 137 = Scroll_Lock
keycode 187 = acute grave
keycode 188 = comma semicolon
keycode 189 = minus underscore
keycode 190 = period colon
keycode 192 = numbersign apostrophe
keycode 210 = plusminus hyphen macron
keycode 211 =
keycode 212 = copyright registered
keycode 213 = guillemotleft guillemotright
keycode 214 = masculine ordfeminine
keycode 215 = ae AE
keycode 216 = cent yen
keycode 217 = questiondown exclamdown
keycode 218 = onequarter onehalf threequarters
keycode 220 = less greater bar
keycode 221 = plus asterisk asciitilde
keycode 227 = multiply division
keycode 228 = acircumflex Acircumflex
keycode 229 = ecircumflex Ecircumflex
keycode 230 = icircumflex Icircumflex
keycode 231 = ocircumflex Ocircumflex
keycode 232 = ucircumflex Ucircumflex
keycode 233 = ntilde Ntilde
keycode 234 = yacute Yacute
keycode 235 = oslash Ooblique
keycode 236 = aring Aring
keycode 237 = ccedilla Ccedilla
keycode 238 = thorn THORN
keycode 239 = eth ETH
keycode 240 = diaeresis cedilla currency
keycode 241 = agrave Agrave atilde Atilde
keycode 242 = egrave Egrave
keycode 243 = igrave Igrave
keycode 244 = ograve Ograve otilde Otilde
keycode 245 = ugrave Ugrave
keycode 246 = adiaeresis Adiaeresis
keycode 247 = ediaeresis Ediaeresis
keycode 248 = idiaeresis Idiaeresis
keycode 249 = odiaeresis Odiaeresis
keycode 250 = udiaeresis Udiaeresis
keycode 251 = ssharp question backslash
keycode 252 = asciicircum degree
keycode 253 = 3 sterling
keycode 254 = Mode_switch

# <script>
#     function test() {
#         if (event.keyCode == 13) {
#             alert("捕捉住回車提交事件!");
#         }
#     }
# </script>
# <input type="text" name="t" onkeydown="test();" />

Javascript有個屬性叫作prototype，全部對象裏都內置了這個屬性，你能夠經過它來改變對象的構造，修改對象、添加更多的變量、更多的功能。

var derp; // will hold a Herp instance
var Herp= function() {
this.opinion=」Javascript is cooler than BASIC.」;
}
Herp.prototype.speak=function() { alert(this.opinion); }
var derp= new Herp();
derp.speak();

JS實現雙擊自動滾屏

解決思路：
在文檔區域雙擊時設置一個定時器，每隔一段時間讓窗口向下移動一段距離。在文檔區域單擊時取消定時器。

具體步驟：
代碼示例：

方法一：判斷滾動至頁面最底端時中止滾動

<script>
var timer
//設置每10毫秒執行一次 scrollit 的函數
function init(){timer=setInterval("scrollit()",10)}
function stop(){clearInterval(timer)}//清除計時器，使窗口中止滾動
function scrollit(){         //使窗口滾動的函數
   scrollBy(0,1)              //將窗口滾動在 Y 軸方向上滾動1個偏移量
     //窗口自動中止滾動的條件
if(document.body.scrollTop==document.body.scrollHeight)
      stop()
}
document.onmousedown=stop          //在文檔區域點擊時觸發 stop 函數
document.ondblclick=init        //在文檔區域雙擊時觸發 init 函數
//爲了測試效果而加的代碼，使頁面出現縱向滾動
document.write(new Array(100).join("<br>"))
</script>

注意：判斷滾動是否至頁面底端的條件忽略了滾動滑塊的高度。

方法二：不考慮自動中止滾動。

<script>
var timer
//在文檔區域雙擊時觸發函數，使窗口每10毫秒在 Y 軸方向上滾動1個偏移量
document.ondblclick=function(){timer=setInterval("scrollBy(0,1)",10)}
//在文檔區域點擊時觸發函數，取消定時器
document.onmousedown=function(){clearInterval(timer)}
//爲了測試效果而加的代碼，使頁面出現縱向滾動
document.write(new Array(120).join("<br>"))
</script>

特別提示
代碼運行後，在文檔區域雙擊，頁面將自動向下滾動，在文檔區域單擊時滾動中止。

本例重點在於捕獲雙擊事件 ondblclick 和頁面的滾動偏移量 scrollBy。
1. ondblclick 當用戶雙擊對象時觸發。
2. scrollBy(x,y) 將窗口滾動 x 和 y 偏移量。

在mvc中，咱們把富文本框中的數據存到後臺去了，可是顯示在頁面上不會換行，咱們在存的時候，就能夠用特殊符號替換\r\n

重點是這兩行代碼onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')"

還有種方式，使用正則判斷，而後使用正則替換不是數字的字符，不過這種是最靈活的，超級棒

function replaceNotNumber(hehe)
{
var pattern = /[^0-9]/g;
if(pattern.test(hehe.value))
{
hehe.value = hehe.value.replace(pattern,"");
}
}

<input maxlength='3' onkeypress="return event.keyCode >= 49 && event.keyCode <= 57" onafterpaste="if(isNaN(value))execCommand('undo')"

var wenben = $("#caseContent"); //textarea input
$(wenben).keyup(function () {
var wenben = $("#caseContent").val();
var wenText = $('#hzfont'); //要顯示數字的地方
var counter = wenben.length;
wenText.text(298 - counter);
});

var d = $("#idExpand_" + id); //得到指定的元素
$("html,body").animate({ scrollTop: d.offset().top }, 500); //1000是ms,也能夠用slow代替

var isIE = !!window.ActiveXObject;
var isIE6 = isIE && !window.XMLHttpRequest;
var isIE8 = isIE && !!document.documentMode;
var isIE7 = isIE && !isIE6 && !isIE8;

Js 冒泡事件阻止

如今，事件處理程序中的變量event保存着事件對象。而event.target屬性保存着發生事件的目標元素。這個屬性是DOM API中規定的，可是沒有被全部瀏覽器實現。jQuery對這個事件對象進行了必要的擴展，從而在任何瀏覽器中都可以使用這個屬性。經過.target，能夠肯定DOM中首先接收到事件的元素（即實際被單擊的元素）。並且，咱們知道this引用的是處理事件的DOM元素，因此能夠編寫下列代碼：
$(document).ready(function(){
$('#switcher').click(function(event){
  $('#switcher .button').toggleClass('hidden');
  })
})

$(document).ready(function(){
$('#switcher').click(function(event){
  if(event.target==this){
  $('#switcher .button').toggleClass('hidden');
  }
  })
})
此時的代碼確保了被單擊的元素是<div id="switcher"> ，而不是其餘後代元素。如今，單擊按鈕不會再摺疊樣式轉換器，而單擊邊框則會觸發摺疊操做。可是，單擊標籤一樣什麼也不會發生，由於它也是一個後代元素。實際上，咱們能夠不把檢查代碼放在這裏，而是經過修改按鈕的行爲來達到目標。

事件對象還提供了一個.stopPropagation()方法，該方法能夠徹底阻止事件冒泡。與.target相似，這個方法也是一種純JavaScript特性，但在跨瀏覽器的環境中則沒法安全地使用。不過，只要咱們經過jQuery來註冊全部的事件處理程序，就能夠放心地使用這個方法。

下面，咱們會刪除剛纔添加的檢查語句event.target == this，並在按鈕的單擊處理程序中添加一些代碼：

$(document).ready(function(){
$('#switcher .button').click(funtion(event){
  //……
   event.stopPropagation();
  })
})

  同之前同樣，須要爲用做單擊處理程序的函數添加一個參數，以便訪問事件對象。而後，經過簡單地調用event.stopPropagation()就能夠避免其餘全部DOM元素響應這個事件。這樣一來，單擊按鈕的事件會被按鈕處理，並且只會被按鈕處理。單擊樣式轉換器的其餘地方則能夠摺疊和擴展整個區域。

若是咱們把單擊事件處理程序註冊到一個錨元素，而不是一個外層的<div>上，那麼就要面對另一個問題：當用戶單擊連接時，瀏覽器會加載一個新頁面。這種行爲與咱們討論的事件處理程序不是同一個概念，它是單擊錨元素的默認操做。相似地，當用戶在編輯完表單後按下回車鍵時，會觸發表單的submit事件，在此事件發生後，表單提交纔會真正發生。

若是咱們不但願執行這種默認操做，那麼在事件對象上調用.stopPropagation()方法也無濟於事，由於默認操做不是在正常的事件傳播流中發生的。在這種狀況下，.preventDefault()方法則能夠在觸發默認操做以前終止事件。

提示當在事件的環境中完成了某些驗證以後，一般會用到.preventDefault()。例如，在表單提交期間，咱們會對用戶是否填寫了必填字段進行檢查，若是用戶沒有填寫相應字段，那麼就須要阻止默認操做。咱們將在第8章詳細討論表單驗證。

事件傳播和默認操做是相互獨立的兩套機制，在兩者任何一方發生時，均可以終止另外一方。若是想要同時中止事件傳播和默認操做，能夠在事件處理程序中返回false，這是對在事件對象上同時調用.stopPropagation()和.preventDefault()的一種簡寫方式。

JS錯誤、忽略屏蔽js錯誤的代碼

在咱們使用IE瀏覽器的時候，不但願看到咱們的網站在左下角任務欄顯示一個「網頁有錯誤」。這顯得網站作得很不正規與標準，所以咱們要避免這種狀況。這段是屏蔽JS錯誤的代碼，加上這段代碼就不會出現這樣的狀況了。

JS複製代碼到剪切板

//複製代碼
function CopyClipboard(txt) {
    if (window.clipboardData) {
        window.clipboardData.clearData();
        window.clipboardData.setData("Text", txt);
    }
    else if (navigator.userAgent.indexOf("Opera") != -1) {
        window.location = txt;
    }
    else if (window.netscape) {
        try {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        }
        catch (e) {
            alert("您的firefox安全限制限制您進行剪貼板操做，請打開'about:config'將signed.applets.codebase_principal_support'設置爲true'以後重試，相對路徑爲firefox根目錄/greprefs/all.js");
            return false;
        }
        var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
        if (!clip) return;
        var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
        if (!trans) return;
        trans.addDataFlavor('text/unicode');
        var str = new Object();
        var len = new Object();
        var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
        var copytext = txt; str.data = copytext;
        trans.setTransferData("text/unicode", str, copytext.length * 2);
        var clipid = Components.interfaces.nsIClipboard;
        if (!clip) return false;
        clip.setData(trans, null, clipid.kGlobalClipboard);
    }
    else {
        return false;
    }
}

複製到剪切板

js去掉字符串中的最後一個字符

var str="aaaaaaaaaaaaaaaaaa|";
var texts=str.substr(0, str.length-1);
alert(texts);

jquery屬性過濾器

//$('div[title]').css('background-color', 'blue'); //獲取全部div中具備titile屬性的元素
//$('div[title=t2]').css('background-color', 'blue'); //獲取全部div中title等於t2的元素
//$('div[title!=t2]').css('background-color', 'blue'); //獲取全部div中title不等於t2的元素
//$('div[title^=t]').css('background-color', 'blue');//獲取全部div中title屬性開頭是t的元素
//$('div[title$=2]').css('background-color','blue')//獲取全部div中title屬性包含2的元素
//$('div[title*=s]').css('background-color', 'blue');//獲取全部div中title屬性結尾是s的元素
$('div[title^=t][title$=4]').css('background-color','blue');//獲取全部title屬性開頭是t，結尾是4的元素

JS中某個數組中是否具備重複元素

ie下 input=file時候可能經過jquey click 可能會有拒絕訪問的問題

// $target container must have relative or absolute position
var root = window,
    $input = $('input[name="file"]'),
    $target = $('#upload-button');

function ieFileInputPlacementFix($input, $target) {

        var p, w, h;

        if ($input.length && $target.length) {
            p = $target.position();
            w = $target.outerWidth();
            h = $target.outerHeight();
            $input.css({
                display: 'block',
                position: 'absolute',
                top: p.top,
                left: p.left,
                width: w,
                height: h,
                padding: 0,
                margin: 0,
                'line-height': 'auto',
                opacity: 0,
                cursor: 'pointer'
            });
        }

}

// detect File API support in browser
function hasFileAPISupport() {
        return !_.isUndefined(root.File && root.FileReader && root.FileList && root.Blob);
}