测试集输入输出框的自适应高度

This commit is contained in:
cxt 2015-09-18 11:29:38 +08:00
parent 8f317711b8
commit ad610cb0b2
3 changed files with 108 additions and 5 deletions

View File

@ -11,7 +11,7 @@
<% homework.homework_tests.each_with_index do |test, index| %>
<div class="mt10">
<textarea class="InputBox W320 fl mr10" placeholder="测试输入" id="textarea_input_test"><%= test.input %></textarea>
<textarea class="InputBox W320 fl mr5" placeholder="测试输出"><%= test.output %></textarea>
<textarea class="InputBox W320 fl mr5" placeholder="测试输出" id="textarea_output_test"><%= test.output %></textarea>
<a href="javascript:void(0);" class=" fl icon_add" title="增加测试组"></a>
<% if index != 0 %>
<a href="javascript:void(0);" class=" fl icon_remove" title="删除测试组"></a>
@ -22,7 +22,7 @@
<% else %>
<div class="mt10">
<textarea class="InputBox W320 fl mr10" placeholder="测试输入" id="textarea_input_test"></textarea>
<textarea class="InputBox W320 fl mr5" placeholder="测试输出"></textarea>
<textarea class="InputBox W320 fl mr5" placeholder="测试输出" id="textarea_output_test"></textarea>
<a href="javascript:void(0);" class=" fl icon_add" title="增加测试组"></a>
<div class="cl"></div>
</div>
@ -34,4 +34,11 @@
<div class="cl"></div>
</div>
</div><!----HomeWorkCon end-->
</div><!----HomeWorkCon end-->
<script>
var text = document.getElementById("textarea_input_test");
var text2 = document.getElementById("textarea_output_test");
autoTextarea2(text,text2);
autoTextarea2(text2,text);
</script>

View File

@ -168,7 +168,14 @@ $(function(){
$("#BluePopupBox").on('click', 'a.icon_add', function(){
var html = bt('t:test-answer-list', null);
$(this).parent('.mt10').after(html);
var inputs = document.getElementsByName("program[input][]");
var outputs = document.getElementsByName("program[output][]");
if (inputs.length == outputs.length) {
for (var i=0; i<inputs.length; i++) {
autoTextarea2(inputs[i], outputs[i]);
autoTextarea2(outputs[i], inputs[i]);
}
}
});
$("#BluePopupBox").on('click', 'a.icon_remove', function(){
$(this).parent('.mt10').remove();

View File

@ -314,4 +314,93 @@ function clickOK(path)
}
});
}
/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////
var autoTextarea2 = function (elem,elem2, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function (element, type, callback) {
element.addEventListener ?
element.addEventListener(type, callback, false) :
element.attachEvent('on' + type, callback);
},
getFirstStyle = elem.currentStyle ? function (name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getFirstStyle('paddingTop')) -
parseFloat(getFirstStyle('paddingBottom')) + 'px';
};
return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getFirstStyle('height'))
elem.style.resize = 'none';
elem2.style.resize = 'none';
var change = function () {
var scrollTop, height,
padding = 0,
style = elem.style,
style2 = elem2.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
elem2._length = elem._length;
if (!isFirefox && !isOpera) {
padding = parseInt(getFirstStyle('paddingTop')) + parseInt(getFirstStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
elem2.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
style2.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
style2.overflowY = 'hidden';
};
style.height = height + extra + 'px';
style2.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
if (elem2.scrollHeight > minHeight) {
if (maxHeight && elem2.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
style2.overflowY = 'auto';
} else {
height = elem2.scrollHeight - padding;
style.overflowY = 'hidden';
style2.overflowY = 'hidden';
};
style.height = height + extra + 'px';
style2.height = height + extra + 'px';
scrollTop += parseInt(style2.height) - elem2.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem2.currHeight = parseInt(style2.height);
};
};
addEvent(elem, 'propertychange', change);
addEvent(elem, 'input', change);
addEvent(elem, 'focus', change);
addEvent(elem2, 'propertychange', change);
addEvent(elem2, 'input', change);
addEvent(elem2, 'focus', change);
change();
};