表单(二)：文本框

input与textarea

<input type='text' size='25' maxlength='50' value=''init value'/>

1、要表现为文本框，必须设置type为text
2、设置size特性，可以指定文本框能够显示的字符数
3、设置value特性，可以设置文本框的初始值
4、maxlength用于指定文本框可以接收的最大字符数。

<textarea rows='25' cols='25'>init value</textarea>

1、与input不同，要指定文本框的大小，可以使用rows(字符行数)和cols(字符列数)特性。
2、与input不同,textarea的初始值必须放在<textarea>与</textarea>之间
3、与input不同，textarea不能指定最大字符数

相同：用户输入的内容都保存在value属性中。

 

var textbox = document.forms[0].elements('textbox1');
console.log(textbox.value);
textbox.value = 'some new value';

*:建议使用像上面一样设置，读取文本框的值，不要使用标准的dom方法setAttribute()设置。原因是因为对value属性的修改不一定反应在dom中

 

选择文本
1、select()
这个方法用于选择文本框中的所有文本。

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

在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时候。因为这样做可以让用户不必一个一个地删除文本。

EventUtil.addHandler(textbox, 'focus', function(){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();
})

将上面的代码应用到文本框后，只要文本框获得焦点，就会选择其中所有的文本。这种技术能够大幅度地提升表单地易用性
2、与select()方法对应的，是一个select事件。在选择了文本框中的文本时，就会触发select事件。

var textbox = document.forms[0].elements['textbox1'];
EventUtil.addHandler(textbox, 'select', function(event){
    var alert('Text selected' + textbox.value);
})

 

取得选择的文本

通过select事件我们可以知道用户什么时候选择了文本，但仍然不知道用户选择了什么文本。
selectionStart,selectionEnd。这两个属性中保存的是基于0的数值

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

 

选择部分文本

setSelectionRange()方法。所有文本框都有一个setSelectionRange()方法，接受两个参数
要选择的第一个字符的索引和要选择的最后一个字符之后的索引

textbox.value = 'hello world!';
//选择所有文本
textbox.setSelectionRange(0, textbox.value.length); //'hello world!'
//选择前三个字符
textbox.setSelectionRange(0,3); //'hel'

要想在文本框中被选择的效果，必须让文本框获得焦点。

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();
}

 

屏蔽非数值字符

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.ctryKey){
        EventUtil.preventDefault(event);
    }
})

在这个例子中，使用EventUtil.getCharCode()实现了跨浏览器取得字符编码。然后使用String.fromCharCode()将字符编码转换称字符串，
再使用正则表达式/\d/来测试该字符串，从而确定用户输入的是不是数值。如果测试失败，那么就使用EventUtil.preventDefault()来屏蔽按键
事件。

h5约束api
1、必填字段,指定required属性，在提交表单时都不能空着

<input type='text' name='username' required/>

...