html限定输入的内容,限定输入内容.html

限定输入内容

input[type=text]{width: 40px;border-color: #bbb;height: 25px;font-size: 14px;border-radius: 2px;outline: 0;border: #ccc 1px solid;padding: 0 10px;-webkit-transition: box-shadow .5s;margin-bottom: 15px;}

input[type=text]:hover, input[type=text]:focus,input[type=submit]:hover{border: 1px solid #56b4ef; box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 0 8px rgba(82,168,236,.6); -webkit-transition: box-shadow .5s;}

input::-webkit-input-placeholder {color: #999; -webkit-transition: color .5s;}

input:focus::-webkit-input-placeholder, input:hover::-webkit-input-placeholder {color: #c2c2c2; -webkit-transition: color .5s;}

input[type=submit]{height: 30px; width: 80px; background: #4393C9; border:1px solid #fff;color: #fff;font:14px bolder; }

年度

月份

function checkYear(obj) {

if (!obj.value.match(/^\d{4}$/)) {

obj.style.borderColor = 'red';

result.innerHTML = '输入错误，年份为4位数字表示';

return false;

}

result.innerHTML = '';

return true;

}

function checkMonth(obj) {

if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {

obj.style.borderColor = 'red';

result.innerHTML = '输入错误，月份为1~12之间';

return false;

}

result.innerHTML = '';

return true;

}

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

元素对象

var result = document.getElementById('result'); //

元素对象

var inputs = document.getElementsByTagName('input'); // 元素集合

form.onsubmit = function() {

return checkYear(inputs.year) && checkMonth(inputs.month);

};

inputs.year.onfocus = function() {

this.style.borderColor = '';

};

inputs.month.onfocus = function() {

this.style.borderColor = '';

};

if (!String.prototype.trim) {

String.prototype.trim = function() {

return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

};

}

inputs.year.onblur = function() {

this.value = this.value.trim();

checkYear(this);

};

inputs.month.onblur = function() {

this.value = this.value.trim();

checkMonth(this);

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史