《JavaScript高级程序设计》笔记：表单脚本（十四）

表单的基础知识

在HTML中，表单是由

元素来表示的，而在JS中，表单对应的是HTMLFormElement类型。HTMLFormElement继承了HTMLElement，因而与其它HTML元素具有相同的默认属性。不过HTMLFormElement也有下列独有的属性和方法。

• acceptCharset：服务器能够处理的字符集；等价于HTML中的accept-charset特性。
• action：接受请求的URL；等价于HTML中的action特性。
• elements：表单中所有控件的集合。
• enctype：请求的编码类型；等价于HTML中的enctype特性。
• length：表单中控件的数量。
• method：要发送的http请求类型，通常是"get"或“post”;等价于HTML中method特性。
• name：表单的名称；等价于HTML的name特性。
• reset()：将所有表单域重置为默认值。
• submit()：提交表单。
• target：用于发送请求和接收响应的窗口名称；等价于HTML中的target特性。

取得form元素引用的几种方式，方式一：

var form = document.getElementById('form1');

方式二：

通过document.forms可以取得页面中的所有表单。在这个集合中，可以通过索引或者name值来取得特定的表单。

var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms['form1']; //取得页面中名为"form1"的表单

提交与重置表单

阻止表单提交：

var form = document.getElementById('myForm');

//使用13章封装的EventUtil对象
EventUtil.addHandler(form,'submit',function(event){
    
    //取得事件对象
    event = EventUtil.getEvent(event);
    
    //阻止默认事件(取消表单的提交)
    event.preventDefault(event);
})

提交与重置：

var form = document.getElementById('myForm');
//提交表单
form.submit();

//重置表单
form.reset();

表单字段

每个表单都有elements属性，该属性是所有表单中所有元素的集合。

var form = document.getElementById('myForm');

//取得表单中的第一个字段
var field1 = form.elements[0];

//取得名为"textbox1"的字段
var field2 = form.elements['textbox1'];

//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

如果有多个表单控件都在使用同一个name（比如单选按钮），那么就会返回以该name命名的一个nodeList。

表单字段共有的属性和方法：

• disabled：布尔值，表示当前字段是否被禁用。
• form：指向当前字段所属表单的指针；只读。
• name：当前字段的名称。
• readOnly：布尔值，表示当前字段是否只读。
• tabIndex：表示当前字段的切换（tab）序号。
• type：当前字段的类型，如“checkbox”、“radio”等。
• value：当前字段被提交到服务器的值。

除了form属性之外，可以通过JS动态修改其它任何属性。

var form = document.getElementById('myForm');
var field = form.elements[0];

//修改value属性
field.value = "Another value";

//检查form属性的值
console.log(field.form == form);

//把焦点设置到当前字段
field.focus();

//禁用当前字段
field.disabled = true;

//修改type属性(不推荐，但对来说是可行的)
field.type ="checkbox";

避免多次提交表单，在第一次点击提交表单后，设置提交按钮disabled为true，如下代码：

var form = document.getElementById('myForm');

//避免多次提交表单
EventUtil.addHandler(form,"submit",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    
    //取得提交按钮
    var btn = target.elements['submit-btn'];
    
    //禁用它
    btn.disabled = true;
    
    //后面代码省略
})

每个表单字段都有两个方法：focus()和blur()。例如，在页面加载完成后，把焦点转移到表单中的第一个字段，如下代码：

EventUtil.addHandler(window,"load",function(event){
    document.forms[0].elements[0].focus();
})

注意，如果第一个表单字段是元素，且它的type特性的值为“hidden”，那么以上代码会发生错误（高版本浏览器升级修复了该问题）。

HTML5为表单字段新增加了一个autofocus属性。

<input type="text"  autofocus/>

检测浏览器是否支持该属性：

EventUtil.addHandler(window,"load",function(event){
    var element = document.forms[0].elements[0];
    if(element.autofocus !== true){
        element.focus();
        console.log("JS focus");
    }
})

所有表单都支持focus()，change()，blur()这三个事件。如下例子：

var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox,"focus",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if(target.style.background != 'red'){
        target.style.background = 'yellow';
    }
});
EventUtil.addHandler(textbox,"blur",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if(/[^\d]/.test(target.value)){
        target.style.background = 'red';
    }else{
        target.style.background = '';
    }
});
EventUtil.addHandler(textbox,"change",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    console.log(target.value)
    if(/[^\d]/.test(target.value)){
        target.style.background = 'red';
    }else{
        target.style.background = '';
    }
})

文本框脚本

两种方式表示文本框：和</span>。</p> <p><input>文本框，通过设置<span style="color: #c7254e; background-color: #f9f2f4;">size</span>属性，可以指定文本框中显示的字符数。通过设置<span style="color: #c7254e; background-color: #f9f2f4;">value</span>特性，可以设置文本框默认的初始值。而<span style="color: #c7254e; background-color: #f9f2f4;">maxLength</span>用于指定文本框可以接受的最大字符数。</p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="20"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="init value"</span><span style="color: #ff0000;"> maxlength</span><span style="color: #0000ff;">="50"</span><span style="color: #0000ff;">/></span></pre> </div> <p>对于<textarea>多行文本框而言，要指定文本框的大小，通过设置<span style="color: #c7254e; background-color: #f9f2f4;">rows</span>（指定文本框的字符行数）和<span style="color: #c7254e; background-color: #f9f2f4;">cols</span>（指定文本框的字符列数）。<textarea>的初始值必须放在<textarea>与之间。

<textarea rows="25" cols="5"> init vauletextarea>

选择文本

上述两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。

var textbox = document.forms[0].elements["textbox"];
textbox.select();

文本框获得焦点，选择其中所有文本，代码如下：

var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"focus",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();
})

1.选择（select）事件

与select()方法对应的是一个select事件。在选择了文本框的文本时，就会触发select事件。不过到底什么时候触发select事件，还会因浏览器而异。在IE9以及其它高版本浏览器中，当用户选择了文本（而且要释放鼠标），才会触发select事件。而在IE8以及更早的版本中，只要用户选择了一个字母（不必释放鼠标），就会触发select事件。另外，在调用select()方法时也会触发select事件。如下代码：

var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"select",function(event){
    console.log("Text selected：" + textbox.value);    
})

2.取得选择的文本

虽然select事件知道用户什么时候选择了文本，但是不知道用户选择了什么文本。HTML5规范为此添加了两个属性：selectionStart和selectionEnd。这两个属性保存的是基于0的数值，表示所选择文本的范围（即文本选区开头和结尾的偏移量）。

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
}
var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"select",function(event){
    console.log("Text selected：" + getSelectedText(textbox));    
})

IE8及之前的版本不支持这两个属性，有一个document.selection对象，其中保存着用户在整个文档范围内选择的文本信息；也就是说，无法确认用户选择的是页面中哪个部位的文本。不过在和select事件一起使用的时候，可以假定是用户选择了文本框中的文本，因而触发了该事件。要取得选中的文本，首先必须创建一个范围，然后将文本从其中提取出来。代码如下：

function getSelectedText(textbox){
    if(typeof textbox.selectionStart == 'number'){
        return textbox.value.substring(textbox.selectionStart,textbox.selectionEnd);
    }else if(document.selection){
        document.selection.createRange().text;
    }    
}

3.选择部分文本

HTML5也为选择文本框中的部分文本提供了解决方案，即setSelectionRange()，这个方法接受两个参数：要选择第一个字符的索引和要选择最后一个字符之后的字符索引（类似与substring的两个参数），如下例子：

textbox.value = "Hello world!";
//选择所有文本
textbox.setSelectionRange(0,textbox.value.length); //Hello world!

//选择前3个字符
textbox.setSelectionRange(0,3); //Hel

//选择第4到第6个字符
textbox.setSelectionRange(4,7); //o w

textbox.focus();

要看到选中的文本，必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。IE9以及其它高版本支持这种方案。

IE8以及更早版本支持使用范围选择部分文本。要选择文本框中的部分文本，必须首先使用IE在所有文本框上提供的createTextRange()方法创建一个范围，并将其放到恰当的位置上。然后再使用moveStart()和moveEnd()这两个范围方法将范围移动到位。不过，在调用这两个方法之前，还必须使用collapse()将范围折叠到文本框的开始位置。此时，moveStart()将范围的起点和终点移动到了相同的位置，只要再给moveEnd()传入要选择的字符总数即可。最后一步，就是使用范围的select()方法选择文本。代码如下：

textbox.value = "Hello world!";

var range = textbox.createTextRange();

//选择所有文本
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",textbox.value.length);//Hello world!
range.select();

//选择前3个字符
range.collapse(true);
range.moveStart("character",0);
range.moveEnd("character",3);//hel
range.select();

//选择第4到第6个字符
range.collapse(true);
range.moveStart("character",4);
range.moveEnd("character",3);//hel
range.select();

跨浏览器：

function selectText(textbox,startIndex,stopIndex){
    if(textbox.setSelectionRange){
        textbox.setSelectionRange(startIndex,stopIndex);
    }else if(textbox.createTextRange){
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character",startIndex);
        range.moveEnd("character",stopIndex-startIndex);
        range.select();
    }
    textbox.focus();
}

 过滤输入

1.屏蔽字符

EventUtil.addHandler(textbox,"keypress",function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
})

注：上面代码能屏蔽英文字符，但是不能屏蔽中文汉字。

只允许用户输入数值：

EventUtil.addHandler(textbox,"keypress",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if(!/\d/.test(String.fromCharCode(charCode))){
        EventUtil.preventDefault(event);
    }
})

虽然理论上只有在用户按下字符键时才会触发keypress事件，但有些浏览器也会对其它键触发此事件。Firefox和Safari(3.1版本以前)会对向上键、向下键、退格键和删除键触发keypress事件。这就意味着，仅考虑到屏蔽不是数值的字符还是不够，还要避免屏蔽这些极为常见和必要的键。在Firefox中，所有由非字符键触发的keypress事件对应的字符编码为0，而在Safari3.1以前的版本中，对应的字符编码全部为8。为了让代码更通用，只要不屏蔽那些字符编码小于10的键即可，故上面代码变为如下：

EventUtil.addHandler(textbox,"keypress",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
        EventUtil.preventDefault(event);
    }
})

上面代码可以屏蔽非数值字符，但不屏蔽那些也会触发keypress事件的基本按键。

还有一个问题需要处理：复制、粘贴以及其它操作还要用到ctrl键，最后还有一个检测，以确保用户没有按下ctrl键，代码如下：

EventUtil.addHandler(textbox,"keypress",function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 && !event.ctrlKey){
        EventUtil.preventDefault(event);
    }
})

2.操作剪贴板

HTML5的6个剪贴板事件。

• beforecopy：在发生复制操作前触发。
• copy：在发生复制操作时触发。
• beforecut：在发生剪切操作前触发。
• cut：在发生剪切操作时触发。
• beforepaste：在发生粘贴操作前触发。
• paste：在发生粘贴操作时触发。

在实际的事件发生前，通过beforecopy、beforecut和beforepaste事件可以在向粘贴板发送数据，或者从剪贴板取得数据之前修改数据。不过，取消这些事件并不会取消对剪贴板的操作，只有取消copy、cut和paste事件，才能阻止相应的操作发生。

要访问剪贴板中的数据，可以使用clipboardData对象；在IE中，这个对象是window对象的属性；而在Firefox、Safari和Chrome中，这个对象是相应的event对象的属性。但是，在Firefox、Safari和Chrome中，只有在处理剪贴板事件期间clipboardData对象才有效，这是为了防止对剪贴板的未授权访问；在IE中，则可以随时访问clipboardData对象。

这个clipboardData对象有三个方法：getData()、setData()和clearData()。

getData()：从剪贴板中取得数据，接受一个参数，即要取得的数据的格式。在IE中，有两种数据格式，“text”和“URL”。在Firefox、Safari和Chrome中，这个参数是一个MIME类型；不过，可以用“text”代表“text/plain”。

setData()：第一个参数也是数据类型，第二参数是放到剪贴板中的文本。对于第一个参数IE照样支持“text”和“URL”。而在Safari和Chrome中，这个参数仍然只支持MIME类型。但是与getData()方法不同的是，Safari和Chrome的setData()方法不能识别“text”类型。这两个浏览器在成功将文本放到剪贴板后，都会返回true，否则返回false。为了弥合这些差异，可以向EventUtil对象中添加下列方法：

var EventUtil = {

    //省略的代码
    
    //得到剪贴板数据
    getClipboardData:function(event){
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    
    //设置剪贴板数据
    setClipboardData:function(event,value){
        if(event.clipboardData){
            return event.clipboardData.setData("text/plain",value);
        }else if(window.clipboardData){
            return window.clipboardData.setData("text",value);
        }
    }
};

在paste事件中，确定剪贴板中的数据是否有效，如果无效，取消默认行为，如下代码，如果不是数字，则取消粘贴：

var textbox = document.forms[0].elements["textbox"];
EventUtil.addHandler(textbox,"paste",function(event){
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardData(event);
    if(!/^\d*$/.test(text)){
        EventUtil.preventDefault(event);
    }
})

自动切换焦点

 html:

<form>
    <input type="text" name="tel1" id="txtTel1" maxlength="3"/>
    <input type="text" name="tel2" id="txtTel2" maxlength="3"/>
    <input type="text" name="tel3" id="txtTel3" maxlength="4"/>
form>

JS代码：

(function(){
    function tabForward(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if(target.value.length == target.maxLength){
            var form = target.form;
            for(var i=0, len = form.elements.length; i < len; i++){
                if(form.elements[i] == target){
                    if(form.elements[i+1]){
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    
    var textbox1 = document.getElementById('txtTel1');
    var textbox2 = document.getElementById('txtTel2');
    var textbox3 = document.getElementById('txtTel3');
    
    EventUtil.addHandler(textbox1,"keyup",tabForward);
    EventUtil.addHandler(textbox2,"keyup",tabForward);
    EventUtil.addHandler(textbox3,"keyup",tabForward);
})();

 HTML5约束验证API

1.必填字段

在表单字段中添加required属性。

<form>
    <input type="text" name="text" id="myText" required/>
    <input type="submit" value="提交"/>
form>

JS检测某个表单字段是否为必填字段：

var isUernameRequired = document.forms[0].elements['username'].required;

使用下面这段代码可以测试浏览器是否支持required属性：

var isRequiredSupported = "required" in document.createElement("input");

2.其他输入类型

HTML5为元素的type值新添了几个值。其中“email”和“url”是两个得到支持最多的类型，如下代码：

<form>
    <input type="email" name="email" required/>
    <input type="url" name="url" required/>
    <input type="submit" value="提交"/>
form>

检测浏览器是否支持这些新类型，不支持它们的旧版本浏览器会自动将未知的值设置为“text”，而支持的浏览器会返回正确的值。例如：

var input = document.createElement("input");
input.type ="email";

var isEmailSupported = (input.type == "email");

3.数值范围

number、range、datetime、datetime-local、date、month、week、time。

对于这些数值类型的输入元素，可以指定min属性（最小的可能值）、max属性（最大的可能值）和step属性（从min到max的两个刻度之间的差值）。

例如，想用户输入0到100的值，并且只能是5的倍数，代码如下：

<input type="number" min="0" max="100" step="5" name="acount"/>

还有两个方法stepUp()和stepDown()，还没有任何浏览器支持，使用如下：

input.stepUp();//加1
input.stepUp(6);//加6
input.stepDown();//减1
input.stepDown(6);//减6

4.输入模式

HTML5为文本字段新增了pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的值。如下，只运行文本输入数字，代码如下：

<input type="number" pattern="\d+" name="acount"/>

注意，模式的开头和结尾不用加^和$符号。

检测浏览器是否支持pattern属性：

var isPatternSupported = "pattern" in document.createElement("input");

5.检测有效性

使用checkValidity()方法可以检测整个表单，也可以检测某个表单字段。

//检测具体的某个表单字段
if(document.forms[0].elements[0].checkValidity()){
    alert("有效的值");
}else{
    alert("无效的值");
}

//检测整个表单
if(document.forms[0].checkValidity()){
    alert("表单有效");
}else{
    alert("表单无效");
}

 6.禁用验证

通过设置novalidate属性，告诉表单不进行验证。

<form method="post" action="signup.php" novalidate>
    
form>

在JS中使用noValidate属性可以取得或设置这个值，如果这个属性存在，值为true，不存在则为false。

document.forms[0].noValidate = true; //禁用验证

如果一个表单中有多个提交按钮，可以指定某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性。

<form method="post" action="foo.php">
    
    <input type="submit" value="Regular Submit"/>
    <input type="submit" formnovalidate name="btnNovalidate" value="Non-validating Submit"/>
form>

使用JS设置这个属性：

document.forms[0].elements['btnNovalidate'].formNoValidate = true; //禁用验证

选择框脚本

选择框是通过和元素创建的。除了所有表单字段共有的属性和方法外，HTMLSelectElement类型还提供了下列属性和方法。

• add(newOption,relOption)：向控件中插入新
元素，其位置在相关项（relOption）之前。
• multiple：布尔值，表示是否允许多项选择；等价于HTML中的multiple特性。
• options：控件中所有
元素的HTMLCollection。
• remove(index)：移除给定位置的选项。
• selectedIndex：基于0的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。
• size：选择框中可见的行数；等价于HTML中的size特性。

选择框的type属性不是“select-one”，就是“select-multiple”。这取决于HTML代码中有没有multiple特性。

在DOM中，每个

元素都有一个HTMLOptionElement对象。为便于访问数据，HTMLOptionElement对象添加了下列属性：

• index：当前选项在options集合中的索引。
• label：当前选项的标签；等价于HTML中的label特性。
• selected：布尔值，表示当前选项是否被选中。将这个属性设置为true可以选中当前选项。
• text：选项的文本。
• value：选项的值（等价于HTML中的value特性）。

如下代码，HTML：

<form>
    <select name="location">
        <option value="1">北京option>
        <option value="2">天津option>
        <option value="3">上海option>
    select>
form>

JS代码：

var selectbox = document.forms[0].elements['location'];
var text = selectbox.options[0].text; //选项的文本
var value = selectbox.options[0].value;//选项的值

选择选项

使用选择框的selectedIndex属性。如上面代码默认选中了天津。

var selectbox = document.forms[0].elements['location'];
var selectOption = selectbox.options[selectbox.selectedIndex];

选中选择框的第一项：

selectbox.options[0].selected = true;

多选下，取得所有选中的项：

function getSelectedOptions(selectbox){
    var result = new Array();
    var option = null;
    for(var i =0, len = selectbox.options.length; i < len; i++){
        option = selectbox.options[i];
        if(option.selected){
            result.push(option);
        }
    }
    return result;
}
var selectbox = document.forms[0].elements['location'];
getSelectedOptions(selectbox);

添加选项

第一种，DOM方式添加：

var selectbox = document.forms[0].elements['location'];
var newoption = document.createElement('option');
newoption.appendChild(document.createTextNode('Option text'));
newoption.setAttribute('value',"option value");
selectbox.appendChild(newoption);

第二种方式，使用Option构造函数，Option构造函数接受两个参数：文本（text）和值（value）,第二个参数可选。虽然这个构造函数会创建一个Option实例，但兼容DOM的浏览器会返回一个

元素。如下代码：

var selectbox = document.forms[0].elements['location'];
var newoption = new Option("Option text","option value");
selectbox.appendChild(newoption); //在IE8以及之前版本有问题

第三种方式使用选择框的add()方法。该方法接受两个参数：要添加的新选项和将位于新选项之后的选项。

var selectbox = document.forms[0].elements['location'];
var newoption = new Option("Option text","option value");
selectbox.add(newoption,undefined); 

移除选项

三种方式如下：

var selectbox = document.forms[0].elements['location'];

//removeChild()传入要移除的选项
selectbox.removeChild(selectbox.options[0]); //移除第一个选项

//remove(index)传入移除项的索引
selectbox.remove(0); //移除第一个选项
 
//将相应选项设置为null
selectbox.options[0] = null;//移除第一个选项

清除选择框所有的项：

function clearSelectBox(selectbox){
    for(var i=0 ,len=selectbox.options.length; i < len; i++){
        selectbox.remove(i);
    }
}

移动和重排选项

将第一个选择框中的第一个选项移动到第二选择框中，代码如下：

var selectbox1 = document.getElementById('location1');
var selectbox2 = document.getElementById('location2');
selectbox2.appendChild(selectbox1.options[0]);

移动选项和移除选项有一个共同之处，即会重置每一个选项的index属性。

要将选择框中的某一项移动到特定的位置，最适合的DOM方法insertBefore()。

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index - 1]);

将选择框中的选项向后移动一个位置：

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index + 2]);

表单序列化

在编写代码之前，有必须先搞清楚在表单提交期间，浏览器是怎样将数据发送给服务器的。

• 对表单字段的名称和值进行URL编码，使用和号（&）分隔。
• 不发送禁用的表单字段。
• 只发送勾选的复选框和单选按钮。
• 不发送type为“reset”和“button”的按钮。
• 多选选择框的每个选中的值单独一个条目。
• 在单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮。也包括type为“image”的

元素。

元素的值，就是选中的元素的value特性的值。如果元素没有value特性，则是元素的文本值。

表单序列化代码：

function serialize(form){
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
    for(i = 0,len = form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
            case "select-one":
            case "select-multiple":
                if(field.name.length){
                    for(j =0, optLen = field.options.length; j < optLen; j++){
                        option = field.options[i];
                        if(option.selected){
                            optValue = "";
                            if(option.hasAttribute){
                                optValue = (option.hasAttribute("value") ? option.value:option.text);
                            }else{
                                optValue = (option.attributes['value'].specified ? option.value:option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                        }
                    }
                }
                break;
            case undefined:  //字段集
            case "file":     //文件输入
            case "submit":   //提交按钮
            case "reset":    //重置按钮
            case "button":   //自定义按钮
                break;
            case "radio":    //单选按钮
            case "checkbox": //复选按钮
                if(!field.checked){
                    break;
                }
            default:  //执行默认操作
                //不包含没有名字的表单字段
                if(field.name.length){
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.value));
                }
            
        }
    }
    return parts.join('&');
}

富文本编辑

富文本编辑，这一技术的本质，就是在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，而编辑对象则是该页面元素的HTML代码。designMode属性有两个可能的值：“off”（默认值）和“on”。在设置为“on”时，整个文档都会变得可以编辑（显示插入符号），然后就可以像使用字处理软件一样，通过键盘将文本内容加粗、变成斜线等等。

<iframe name="richedit" style="width:100px;height:100px;" src="index2.html">iframe>
<script type="text/javascript">
    EventUtil.addHandler(window,"load",function(event){
        frames["richedit"].document.designMode = "on";
    })
script>

使用contenteditable属性

另一种编辑富文本内容的方式是使用名为contenteditable的特殊属性。这个属性最早由IE实现。使用它，不需要使用iframe、空白页和JS，只要给元素设置该属性即可，如下：

<div class="editable" id="richedit" contenteditable style="width:100px;height:100px;border:1px solid grey">div>

通过在这个元素上设置contenteditable属性，也能打开或关闭编辑模式，代码如下：

var div = document.getElementById('richedit');
div.contentEditable = "false";

contentEditable属性有三个可能值：“true”表示打开，“false”表示关闭，“inherit”表示从父元素那里继承。

操作富文本

document.execCommand()，这个方法可以对文档执行预定义的命令，这个方法接受三个参数：要执行的命令名称、表示浏览器是否应该为当前命令提供用户界面的一个布尔值（跨浏览器兼容性，一般都设置为false）和执行命令必须的一个值。

使用命令来修改富文本区域的外观，如下例子：

//转换粗体文本
frames["richedit"].document.execCommand("bold",false,null);

//转换斜体文本
frames["richedit"].document.execCommand("italic",false,null);

同样的方法适用于页面中contenteditable属性为true的区块：

//转换粗体文本
document.execCommand("bold",false,null);

//转换斜体文本
document.execCommand("italic",false,null);

富文本选区

表单与富文本

EventUtil对象方法：

var EventUtil = {
    
    //事件处理程序
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type,handler);
        }else{
            element["on" + type] = handler;
        }
    },
    
    //得到event对象
    getEvent:function(event){
        return event ? event : window.event;
    },
    
    //得到事件目标
    getTarget:function(event){
        return event.target || event.srcElement;
    },
    
    //得到相关元素信息
    getRelatedTarget:function(event){
        if(event.relatedTarget){
            return event.relatedTarget;
        }
        else if(event.toElement){
            return event.toElement;
        }
        else if(event.fromElement){
            return event.fromElement;
        }else{
            return null;
        }
    },
    
    //取消默认行为
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    
    //得到button属性
    getButton:function(event){
        if(document.implementation.hasFeature("MouseEvents","2.0")){
            return event.button;
        }else{
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                    return 0;
                case 2:
                case 6:
                    return 2;
                case 4:
                    return 1;
            }
        }
    },
    
    //取得鼠标滚轮增量值(delta)
    getWheelDelta:function(event){
        if(event.wheelDelta){
            return event.wheelDelta;
        }else{
            return -event.detail * 40;
        }
    },
    
    //字符编码
    getCharCode:function(event){
        if(typeof event.charCode == 'number'){
            return event.charCode;
        }else{
            return event.keyCode;
        }
    },
    
    //移除事件处理程序
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on" + type,handler);
        }else{
            element["on" + type] = null;
        }
    },
    
    //阻止事件捕获或冒泡
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    
    //得到剪贴板数据
    getClipboardData:function(event){
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },
    
    //设置剪贴板数据
    setClipboardData:function(event,value){
        if(event.clipboardData){
            return event.clipboardData.setData("text/plain",value);
        }else if(window.clipboardData){
            return window.clipboardData.setData("text",value);
        }
    }
};

 

你可能感兴趣的:(《JavaScript高级程序设计》笔记：表单脚本（十四）)

• 一百九十四章. 自相矛盾 巨木擎天
  唉！就这么一夜，林子感觉就像过了很多天似的，先是回了阳间家里，遇到了那么多不可思议的事情儿。特别是小伙伴们，第二次与自己见面时，僵硬的表情和恐怖的气氛，让自己如坐针毡，打从心眼里难受！还有东子，他现在还好吗？有没有被人欺负？护城河里的小鱼小虾们，还都在吗？水不会真的干枯了吧？那对相亲相爱漂亮的太平鸟儿，还好吧！春天了，到了做窝、下蛋、喂养小鸟宝宝的时候了，希望它们都能够平安啊！虽然没有看见家人，也
• 10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
  本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
• 《投行人生》读书笔记 小蘑菇的树洞
  《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
• Long类型前后端数据不一致 igotyback 前端
  响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
• 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
  提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
• 每日一题——第八十四题 互联网打工人no1 C语言程序设计每日一练c语言
  题目：编写函数1、输入10个职工的姓名和职工号2、按照职工由大到小顺序排列，姓名顺序也随之调整3、要求输入一个职工号，用折半查找法找出该职工的姓名#define_CRT_SECURE_NO_WARNINGS#include#include#defineMAX_EMPLOYEES10typedefstruct{intid;charname[50];}Empolyee;voidinputEmploye
• git常用命令笔记 咩酱-小羊 git笔记
  ###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
• PHP环境搭建详细教程 好看资源平台 前端php
  PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
• 509. 斐波那契数(每日一题) lzyprime
  lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
• 拥有断舍离的心态，过精简生活--《断舍离》读书笔记 爱吃丸子的小樱桃
  不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
• SQL Server_查询某一数据库中的所有表的内容 qq_42772833 SQLServer数据库sqlserver
  1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM
• 四章-32-点要素的聚合 彩云飘过
  本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
• DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
  ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
• 高端密码学院笔记285 柚子_b4b4
  高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
• 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
  ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
• HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
  Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
• Day17笔记-高阶函数 ~在杰难逃~ Python笔记python开发语言pycharm数据分析
  高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab
• Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Pythonpython开发语言大数据数据分析数据挖掘
  大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
• node.js学习 小猿L node.jsnode.js学习vim
  node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
• 数据仓库——维度表一致性 墨染丶eye 背诵数据仓库
  数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
• 【Git】常见命令(仅笔记) 好想有猫猫 GitLinux学习笔记git笔记elasticsearchlinuxc++
  文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"[email protected]
• 日常演播练习0822 开阳春天
  日常演播练习0822一、绕口令练习司小四和史小世，四月十四日十四时四十上集市，司小四买了四十四斤四两西红柿，史小世买了十四斤四两细蚕丝。司小四要拿四十四斤四两西红柿换史小世十四斤四两细蚕丝。史小世十四斤四两细蚕丝不换司小四四十四斤四两西红柿。司小四说我四十四斤四两西红柿可以增加营养防近视，史小世说我十四斤四两细蚕丝可以织绸织缎又抽丝。二、文本练习狗熊是动物街有名的美食家，它吃得多所以长得胖，它能吃
• 为什么你总是对下属不满意? ZhaoWu1050
  【ZhaoWu的听课笔记】大多数公司，都存在两种问题。我创业四年，更是体会深切。这两种问题就是：老板经常不满意下属的表现；下属总是不知道老板想要什么；虽然这两种问题普遍存在，其实解决方法并不复杂。这节课，我们再聊聊第一个问题：为什么老板经常不满意下属表现?其实，这背后也是一条管理常识。管理学家德鲁克先生早就说过：管理者的任务，不是去改变人。*来自《卓有成效的管理者》只是大多数老板和我一样，都是一边
• 母亲节如何做小红书营销 美橙传媒
  小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
• 读书笔记|《遇见孩子，遇见更好的自己》5 抹茶社长
  为人父母意味着放弃自己的过去，不要对以往没有实现的心愿耿耿于怀，只有这样，孩子们才能做回自己。985909803.jpg孩子在与父母保持亲密的同时更需要独立，唯有这样，孩子才会成为孩子，父母才会成其为父母。有耐心的人生往往更幸福，给孩子留点余地。认识到养儿育女是对耐心的考验。为失败做好心理准备，教会孩子控制情绪。了解自己的底线，说到底线，有一点很重要，父母之所以发脾气，真正的原因往往在于他们自己，
• Linux sh命令 fengyehongWorld Linuxlinux
  目录一.基本语法二.选项2.1-c字符串中读取内容，并执行2.1.1基本用法2.1.2获取当前目录下失效的超链接2.2-x每个命令执行之前，将其打印出来2.3结合Here文档使用一.基本语法⏹Linux和Unix系统中用于执行shell脚本或运行命令的命令。sh[选项][脚本文件][参数...]⏹选项-c：从字符串中读取内容，并执行。-x：在每个命令执行之前，将其打印出来。-s：从标准流中读取内容
• 基于Python给出的PDF文档转Markdown文档的方法 程序媛了了 pythonpdf开发语言
  注：网上有很多将Markdown文档转为PDF文档的方法，但是却很少有将PDF文档转为Markdown文档的方法。就算有，比如某些网站声称可以将PDF文档转为Markdown文档，尝试过，不太符合自己的要求，而且无法保证文档没有泄露风险。于是本人为了解决这个问题，借助GPT（能使用GPT镜像或者有条件直接使用GPT的，反正能调用GPT接口就行）生成Python代码来完成这个功能。笔记、代码难免存在
• 语文主题教学学习笔记之87 东哥杂谈
  “语文主题教学”学习笔记之八十七（0125）今天继续学习小学语文主题教学的实践样态。板块三：教学中体现“书艺”味道。作为四大名著之一的《水浒传》，堪称我国文学宝库之经典。对从《水浒传》中摘选的单元，教师就要了解其原生态，即评书体特点。这也要求教师要了解一些常用的评书行话术语，然后在教学时适时地加入一些，让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式，而不单是分析讲解的方式进行学习。细
• Armv8.3 体系结构扩展--原文版 代码改变世界ctw ARM-TEE-Androidarmv8嵌入式arm架构安全架构芯片TrustzoneSecureboot
  快速链接:.ARMv8/ARMv9架构入门到精通-[目录]付费专栏-付费课程【购买须知】:个人博客笔记导读目录(全部)TheArmv8.3architectureextensionTheArmv8.3architectureextensionisanextensiontoArmv8.2.Itaddsmandatoryandoptionalarchitecturalfeatures.Somefeat
• python批量读取tiff文件_Python Pillow批量转换tif格式到jpg weixin_39557797
  最近因为想要整下网站的壁纸，从网站下载了别人整理好的合集压缩包，解压之后，却发现里面的文件都是tif的，tif格式网站和电脑都不认的，根本不能作壁纸。这时候，就需要转换图片格式了，首先我找了几款转换格式的软件，发现效果都不好，要不是不支持tif格式，要不就是转换出来的图片糊的不行。最终，还是决定用Python的Pillow库来写一个脚本，完成这个任务。下面是整个的小脚本----importosim
• 设计模式介绍 tntxia 设计模式
  设计模式来源于土木工程师 克里斯托弗 亚历山大（http://en.wikipedia.org/wiki/Christopher_Alexander）的早期作品。他经常发表一些作品，内容是总结他在解决设计问题方面的经验，以及这些知识与城市和建筑模式之间有何关联。有一天，亚历山大突然发现，重复使用这些模式可以让某些设计构造取得我们期望的最佳效果。 亚历山大与萨拉-石川佳纯和穆雷 西乐弗斯坦合作
• android高级组件使用(一) 百合不是茶 androidRatingBarSpinner
  1、自动完成文本框（AutoCompleteTextView） AutoCompleteTextView从EditText派生出来，实际上也是一个文本编辑框，但它比普通编辑框多一个功能：当用户输入一个字符后，自动完成文本框会显示一个下拉菜单，供用户从中选择，当用户选择某个菜单项之后，AutoCompleteTextView按用户选择自动填写该文本框。 使用AutoCompleteTex
• [网络与通讯]路由器市场大有潜力可挖掘 comsci 网络
            如果国内的电子厂商和计算机设备厂商觉得手机市场已经有点饱和了,那么可以考虑一下交换机和路由器市场的进入问题.....        这方面的技术和知识,目前处在一个开放型的状态,有利于各类小型电子企业进入  &nbs
• 自写简单Redis内存统计shell 商人shang Linux shell统计Redis内存
  #!/bin/bash address="192.168.150.128:6666,192.168.150.128:6666" hosts=(${address//,/ }) sfile="staticts.log" for hostitem in ${hosts[@]} do ipport=(${hostitem
• 单例模式(饿汉 vs懒汉) oloz 单例模式
  package 单例模式; /* * 应用场景:保证在整个应用之中某个对象的实例只有一个 * 单例模式种的《 懒汉模式》 * */ public class Singleton { //01 将构造方法私有化，外界就无法用new Singleton()的方式获得实例 private Singleton(){}; //02 申明类得唯一实例 priva
• springMvc json支持 杨白白 json springmvc
  1.Spring mvc处理json需要使用jackson的类库，因此需要先引入jackson包 2在spring mvc中解析输入为json格式的数据:使用@RequestBody来设置输入 @RequestMapping("helloJson") public @ResponseBody JsonTest helloJson() {
• android播放，掃描添加本地音頻文件 小桔子
          最近幾乎沒有什麽事情，繼續鼓搗我的小東西。想在項目中加入一個簡易的音樂播放器功能，就像華為p6桌面上那麼大小的音樂播放器。用過天天動聽或者QQ音樂播放器的人都知道，可已通過本地掃描添加歌曲。不知道他們是怎麼實現的，我覺得應該掃描設備上的所有文件，過濾出音頻文件，每個文件實例化為一個實體，記錄文件名、路徑、歌手、類型、大小等信息。具體算法思想，
• oracle常用命令 aichenglong oracledba常用命令
  1 创建临时表空间 create temporary tablespace user_temp  tempfile 'D:\oracle\oradata\Oracle9i\user_temp.dbf' size 50m  autoextend on  next 50m maxsize 20480m  extent management local
• 25个Eclipse插件 AILIKES eclipse插件
  提高代码质量的插件1. FindBugsFindBugs可以帮你找到Java代码中的bug，它使用Lesser GNU Public License的自由软件许可。2. CheckstyleCheckstyle插件可以集成到Eclipse IDE中去，能确保Java代码遵循标准代码样式。3. ECLemmaECLemma是一款拥有Eclipse Public License许可的免费工具，它提供了
• Spring MVC拦截器+注解方式实现防止表单重复提交 baalwolf spring mvc
  原理：在新建页面中Session保存token随机码，当保存时验证，通过后删除，当再次点击保存时由于服务器端的Session中已经不存在了，所有无法验证通过。   1.新建注解：   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
• 《Javascript高级程序设计(第3版)》闭包理解 bijian1013 JavaScript
  “闭包是指有权访问另一个函数作用域中的变量的函数。”--《Javascript高级程序设计(第3版)》         看以下代码： <script type="text/javascript"> function outer() { var i = 10; return f
• AngularJS Module类的方法 bijian1013 JavaScriptAngularJSModule
          AngularJS中的Module类负责定义应用如何启动，它还可以通过声明的方式定义应用中的各个片段。我们来看看它是如何实现这些功能的。 一.Main方法在哪里         如果你是从Java或者Python编程语言转过来的，那么你可能很想知道AngularJS里面的main方法在哪里？这个把所
• [Maven学习笔记七]Maven插件和目标 bit1129 maven插件
  插件(plugin)和目标(goal) Maven，就其本质而言，是一个插件执行框架，Maven的每个目标的执行逻辑都是由插件来完成的，一个插件可以有1个或者几个目标，比如maven-compiler-plugin插件包含compile和testCompile，即maven-compiler-plugin提供了源代码编译和测试源代码编译的两个目标   使用插件和目标使得我们可以干预
• 【Hadoop八】Yarn的资源调度策略 bit1129 hadoop
  1. Hadoop的三种调度策略 Hadoop提供了3中作业调用的策略， FIFO Scheduler Fair Scheduler Capacity Scheduler 以上三种调度算法，在Hadoop MR1中就引入了，在Yarn中对它们进行了改进和完善.Fair和Capacity Scheduler用于多用户共享的资源调度   2. 多用户资源共享的调度
• Nginx使用Linux内存加速静态文件访问 ronin47
  Nginx是一个非常出色的静态资源web服务器。如果你嫌它还不够快，可以把放在磁盘中的文件，映射到内存中，减少高并发下的磁盘IO。 先做几个假设。nginx.conf中所配置站点的路径是/home/wwwroot/res，站点所对应文件原始存储路径：/opt/web/res shell脚本非常简单，思路就是拷贝资源文件到内存中，然后在把网站的静态文件链接指向到内存中即可。具体如下：
• 关于Unity3D中的Shader的知识 brotherlamp unityunity资料unity教程unity视频unity自学
  首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，然后我们来看下Unity3D自带的60多个S
• CopyOnWriteArrayList vs ArrayList bylijinnan java
  package com.ljn.base; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.concurrent.CopyOnWriteArrayList; /** * 总述： * 1.ArrayListi不是线程安全的，CopyO
• 内存中栈和堆的区别 chicony 内存
  1、内存分配方面：     堆：一般由程序员分配释放， 若程序员不释放，程序结束时可能由OS回收 。注意它与数据结构中的堆是两回事，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。     栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中
• 回答一位网友对Scala的提问 chenchao051 scalamap
  本来准备在私信里直接回复了，但是发现不太方便，就简要回答在这里。 问题 写道 对于scala的简洁十分佩服，但又觉得比较晦涩，例如一例，Map("a" -> List(11,111)).flatMap(_._2)，可否说下最后那个函数做了什么，真正在开发的时候也会如此简洁？谢谢    先回答一点，在实际使用中，Scala毫无疑问就是这么简单。
• mysql 取每组前几条记录 daizj mysql分组最大值最小值每组三条记录
  一、对分组的记录取前N条记录：例如：取每组的前3条最大的记录 1.用子查询： SELECT * FROM tableName a  WHERE 3> (SELECT COUNT(*) FROM  tableName b WHERE b.id=a.id AND b.cnt>a. cnt) ORDER BY a.id,a.account DE
• HTTP深入浅出 http请求 dcj3sjt126com http
    HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务，HTTP目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，然后We
• 判断MySQL记录是否存在方法比较 dcj3sjt126com mysql
  把数据写入到数据库的时，常常会碰到先要检测要插入的记录是否存在，然后决定是否要写入。 　　我这里总结了判断记录是否存在的常用方法： 　　sql语句： select   count ( * )  from  tablename; 　　然后读取count(*)的值判断记录是否存在。对于这种方法性能上有些浪费，我们只是想判断记录记录是否存在，没有必要全部都查出来。
• 对HTML XML的一点认识 e200702084 htmlxml
  感谢http://www.w3school.com.cn提供的资料 HTML 文档中的每个成分都是一个节点。 节点 根据 DOM，HTML 文档中的每个成分都是一个节点。 DOM 是这样规定的： 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 Node 层次
• jquery分页插件 genaiwei jqueryWeb前端分页插件
  //jquery页码控件// 创建一个闭包    (function($) {      // 插件的定义      $.fn.pageTool = function(options) {        var totalPa
• Mybatis与Ibatis对照入门于学习 Josh_Persistence mybatisibatis区别联系
  一、为什么使用IBatis/Mybatis         对于从事 Java EE 的开发人员来说，iBatis 是一个再熟悉不过的持久层框架了，在 Hibernate、JPA 这样的一站式对象 / 关系映射（O/R Mapping）解决方案盛行之前，iBaits 基本是持久层框架的不二选择。即使在持久层框架层出不穷的今天，iBatis 凭借着易学易用、
• C中怎样合理决定使用那种整数类型？ 秋风扫落叶 c数据类型
  如果需要大数值(大于32767或小于32767), 使用long 型。 否则, 如果空间很重要 (如有大数组或很多结构), 使用 short 型。 除此之外, 就使用 int 型。 如果严格定义的溢出特征很重要而负值无关紧要, 或者你希望在操作二进制位和字节时避免符号扩展的问题, 请使用对应的无符号类型。 但是, 要注意在表达式中混用有符号和无符号值的情况。    &nbs
• maven问题 zhb8015 maven问题
    问题1： Eclipse 中 新建maven项目 无法添加src/main/java 问题    eclipse创建maevn web项目，在选择maven_archetype_web原型后，默认只有src/main/resources这个Source Floder。     按照maven目录结构，添加src/main/ja
• (二)androidpn-server tomcat版源码解析之--push消息处理 spjich javaandrodipn推送
  在 (一)androidpn-server tomcat版源码解析之--项目启动这篇中，已经描述了整个推送服务器的启动过程，并且把握到了消息的入口即XmppIoHandler这个类，今天我将继续往下分析下面的核心代码，主要分为3大块，链接创建，消息的发送，链接关闭。 先贴一段XmppIoHandler的部分代码 /** * Invoked from an I/O proc
• 用js中的formData类型解决ajax提交表单时文件不能被serialize方法序列化的问题 中华好儿孙 JavaScriptAjaxWeb上传文件FormData
  var formData = new FormData($("#inputFileForm")[0]); $.ajax({ type:'post', url:webRoot+"/electronicContractUrl/webapp/uploadfile", data:formData, async: false, ca
• mybatis常用jdbcType数据类型 ysj5125094 mybatismapperjdbcType
    MyBatis 通过包含的jdbcType 类型 BIT         FLOAT      CHAR          

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.