// defaultValue:得到原本的value值;不会因为值的改变而变化;
alert(textField.defaultValue); // 得到最初设置的value值;
2.选择文本
// 使用select()方法,可以将文本框里的内容选中,并将焦点设置到文本框中; textField.select(); // 在文本框获得焦点时选择其所有文本; // 选取部分文本 // 在使用文本框内容的时候,我们有时要直接选定部分文本,这个行为还没有标准; // Firefox的解决方案是:setSelectionRange()方法;它接受两个参数:索引和长度; textField.setSelectionRange(0,1); // 选择第一个字符; textField.setSelectionRange(0,textField.value.length); // 选择全部; // IE8以下不支持这种写法,可以使用IE的范围操作代替; var range = textField.createTextRange(); // 创建一个文本范围对象; range.collapse(true); // 将指针移动到起点; range.moveStart('character',0); // 移动指针,character表示逐字移动; range.moveEnd('character',1); // 移动终点; range.select(); // 焦点选定; // 选择部分文本兼容函数 function selectText(text,start,stop){ if(text.setSelectionRange){ text.setSelectionRange(start,stop); text.focus(); }else if(text.createTextRange){ var range = text.createTextRange(); range.collapse(true); range.moveStart('character',start); range.moveEnd('character',sotp-start); range.select(); } } // 与select()方法对应的,是一个select事件,可以选中文本框文本后触发; addEvent(textField,'select',function(){ alert(this.value); // IE事件需要传递this才可以这么写; });
// 获得选择的文本 // Firefox提供了两个属性:selectionStart和selectionEnd; addEvent(textField,'select',function(){ alert(this.value.substring(this.selectionStart,this.selectionEnd)); }); // IE8以下,提供了另一个方案:selection对象,属于document; // 这个对象保存着用户在整个文档范围内选择的文本信息; // 兼容函数 function getSelecText(text){ if(typeof text.selectioinStart =='number'){ // 非IE; return text.value.substring(text.selectionStart,text.selectionEnd); }else if(document.selection){ // IE; return document.selection.createRange().text; // 获取IE选择的文本; } } // PS:存在问题:IE在触发select事件的时候,在选择一个字符后立即触发,而其他浏览器是选择想要的字符后释放鼠标键时再触发; // 所以使用alert()的话,导致跨浏览器的不兼容; // 所以我们可以通过将得到的选择文本赋值给别的对象; addEvent(textField,'select',function(){ // alert(getSelecText(this)); // 导致用户行为结果不一致; document.getElementById('box').innerHTML = getSelecText(this); })
3.过滤输入
// 为了使文本框输入指定的字符,我们必须对输入进文本框的字符进行验证; addEvent(areaField,'keypress',function(evt){ var e = evt || window.event; var charCode = getCharCode(evt); // 得到字符编码; if(!/\d/.test(String.formCharCode(charCode)) && charCode>9 && !e.ctrlKey){ preDef(evt); // 条件阻止默认; } }); // PS:前半段条件判断只有数字才可以输入,导致常规按键,比如光标键/退格键/删除键等无法使用; // 部分浏览器比如Firefox,需要解放这些键,而非字符触发的编码均为0; // 在Safari3之前的浏览器,也会被阻止,而它对应的字符编码全部为8,所以最后加上charCode>9的判断; // 确保用户没有按下ctrl键;
// 阻止文本框裁剪/复制和粘贴; 事件名 说明 copy 在发生复制操作时触发; cut 在发生裁剪操作时触发; paste 在发生粘贴操作时触发; beforecopy 在发生复制操作时触发; beforecut 在发生裁剪操作时触发; beforepaste 在发生粘贴操作时触发; // 如果我们想要禁用裁剪/复制/粘贴,那么可以阻止默认行为即可; addEvent(areaField,'cut',function(evt){ preDef(evt); }); addEvent(areaField,'copy',function(evt){ preDef(evt); }); addEvent(areaField,'paste',function(evt){ preDef(evt); }); // 最后一个影响输入的因素,就是:输入法; // 中文输入法,它的原理是在输入法面板上先储存文本,按下回车就写入英文文本,按下空格就写入中文文本; // 解决方案:通过CSS来禁止调出输入法;; // CSS直接编写; areaField.style.imeMode='disabled'; // 在JS中设置; // PS:Chrome无法禁止输入法调出,所以,最后使用正则验证已输入的文本; addEvent(areaField,'keyup',function(evt){ this.value = this.value.replace(/[^\d]/g,''); // 把非数字都替换成空; });
4.自动切换焦点