测试集输入输出框的自适应高度
This commit is contained in:
parent
8f317711b8
commit
ad610cb0b2
|
@ -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>
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
};
|
Loading…
Reference in New Issue