JavaScript 自动切换焦点、表单序列、富文本编辑(所见即所得)

文章标签: javascript
2014-12-17 13:09:04     8 人阅读    

//自动切换焦点
(function() {
    function tabForward(event) {//前一个文本框输入字符达到最大时,自动切换焦点到下一个文本框
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        if(target.value.length == target.maxLength) {
            var form = target.form;//取得目标文本框所属的form
            for(var i=0, len=form.elements.length; i<len; i++) {
                if(form.elements[i] == target) {
                    form.elements[i+1].focus();
                    return;
                }
            }
        }
    }

    var textbox1 = document.getElementById("t1");
    var textbox2 = document.getElementById("t2");
    var textbox3 = document.getElementById("t3");
    var textbox4 = document.getElementById("t4");
    var textbox5 = document.getElementById("t5");

    EventUtil.addHandler(textbox1, "keyup", tabForward);
    EventUtil.addHandler(textbox2, "keyup", tabForward);
    EventUtil.addHandler(textbox3, "keyup", tabForward);
    EventUtil.addHandler(textbox4, "keyup", tabForward);
    EventUtil.addHandler(textbox5, "keyup", tabForward);
})();

//选择框脚本
var selectbox = document.forms[2].location;//var selectbox = document.forms[2].elements["location"];
for(var i=0, len=selectbox.options.length; i<len; i++) {//测试select的value属性
    var option = selectbox.options[i];
    alert(option.value);//依次输出Guangzhou,Beijing,Shanghai,Nanjing, ,台湾
}
//选择选项
var selectedIndex = selectbox.selectedIndex;
var selectedOption = selectbox.options[selectedIndex];
alert("Selected index: " + selectedIndex + "\nSelected text: " + selectedOption.text + "\nSelected value: " 
+ selectedOption.value);
function getSelectedOption(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 selLocation = document.getElementById("selLocation");
var selectOptions = getSelectedOption(selLocation);
var msg = "";
for(var i=0, len=selectOptions.length; i<len; i++) {
    msg += "\nSelected index: " + selectOptions[i].index + "\nSelected value: " + selectOptions[i].value 
    + "\nSelected text: " + selectOptions[i].text + "\n\n";
}
alert(msg);

//添加选项
var newOption = document.createElement("option");//DOM方法添加选项
newOption.appendChild(document.createTextNode("昆明"));
newOption.setAttribute("value", "Kunming");
selectbox.appendChild(newOption);

var newOption = new Option("昆明", "Kunming");//Option构造函数添加选项
selectbox.appendChild(newOption);//IE中有问题

var newOption = new Option("昆明", "Kunming");//Option text,Option value
selectbox.add(newOption, undefined);//使用选项框的add()方法

    //移除选项
selectbox.removeChild(selectbox.options[0]);//DOM方法
selectbox.remove(0);//remove()方法
selectbox.options[0] = null;//设置为null

    //移动和重排选项
var selectbox1 = document.getElementById("selectbox1");
var selectbox2 = document.getElementById("selectbox2");
selectbox2.appendChild(selectbox1.options[0]);//将第一个选择框中的第一个选项移到第二个选择框里

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index - 1]);//第二项向前移动一个位置
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index + 2]);//第二项向后移动一个位置

//表单序列化
function serialize(form) {
    var parts = new Array();
    var field = null;

    for(var i=0, len=form.elements.length; i<len; i++) {
        field = form.elements[i];
        switch(field.type) {
            case "select-one"://单选框
            case "select-multiple"://多选框
                for(var j=0, optLen=field.options.length; j<optLen; j++) {
                    var option = field.options[i];
                    if(option.selected) {
                        var optValue = "";
                        if(option.hasAttribute) {
                            optValue = option.hasAttribute("value") ? option.value : option.text;
                        } else {//IE
                            optValue = (option.attributes["value"].specified ? option.value : option.text);
                        }
                        parts.push(encodeURICompanent(field.name) + "=" + encodeURICompanent(optValue));
                    }
                }
                break;
            case undefined://未设置type
            case "file"://type为file的字段不发送
            case "reset"://type为reset的字段不发送
            case "submit"://type为submit的字段不发送
            case "button"://type为button的字段不发送
            case "image"://type为image的字段不发送
                break;
            case "radio"://单选框
            case "checkbox"://复选框
                if(!field.checked) {//未勾选则不发送
                    break;
                }
            
            default:
                parts.push(encodeURICompanent(field.name) + "=" + encodeURICompanent(field.value));
        }
    }

    return parts.join("|");
};

//富文本编辑(所见即所得)
frames["richedit"].document.designMode = "on";//整个文档都可编辑
    //操作富文本
frames["richedit"].document.execCommand("backcolor", false, "#EEE");//对文档执行预定义命令
frames["richedit"].document.execCommand("createlink", false, "http://www.google.cn/");
var result = frames["richedit"].document.queryCommandEnabled("bold");
//检测是否可以针对当前选择的文本或当前插入字符所在位置执行相应命令
var isBold = frames["richedit"].document.queryCommandState("bold");//确定是否已经将指定命令运用到了选择的文本
var fontSize = frames["richedit"].document.queryCommandValue("fontsize");
//取得执行命令时传入的值,即execCommand()的第三个参数

    //富文本选区
var selection = frames["richedit"].getSelection();
var selectedText = selection.toString();//取得选择的文本
var range = selection.getRangeAt(0);//取得代表选区的范围

var span = frames["richedit"].document.createElement("span");
span.style.backgroundColor = "yellow";//为富文本编辑器中被选择的文本添加黄色背景
range.surroundContents(span);

var ieRange = frames["richedit"].document.selection.createRange();//IE
var selectionText = ieRange.text;
ieRange.pasteHTML("<span style=\"background-color:yellow;\">" + ieRange.htmlText + "</span>");

    //表单与富文本
EventUtil.addHandler(form, "submit", function(event) {//将富文本编辑器里的HTML提交给服务器
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.elements["comments"].value = frames["richedit"].document.body.innerHTML;
    //将iframe中的HTML插入到一个叫“comments”的表单字段中
});


原文地址:http://www.itmmd.com/201412/330.html
该文章由 萌萌的IT人 整理发布,转载须标明出处。

(asp.net MVC学习)控制器Controller以及Action   上一篇
下一篇  java Rest学习-第一个Java REST 服务(5)-测试运行

精彩回复
发表评论
姓名:       

《程序员app》专门为程序员量身定做!