Untitled
unknown
plain_text
3 years ago
7.7 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
</head>
<body >
<div class="container-fluid">
<p><label for="text">Review of W3Schools:</label></p>
<!-- <textarea id="text" name="w3review" rows="4" cols="50">
</textarea>
<div id="count"></div> -->
<textarea rows="15" cols="30" name="t1" id="text"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span>
<div>
<!-- <div class="row" >
<div class="col-12 col-lg-5 ml-auto">
<input type="number" name="row" id="enterRows">
</div>
<div class="col-12">
<div class="row div-row" id="main_div" style="background-color: rosybrown; display: none;">
<div class="col-12 col-md-3 col-lg-3 col-xl-3" style="border: 1px solid white;">
<label for="">Label1</label>
</div>
<div class="col-12 col-md-4 col-lg-4 col-xl-4" style="border: 1px solid white;">
<label for="" id="question"></label>
</div>
<div class="col-12 col-md-5 col-lg-5 col-xl-5" id="ques_response" style="border: 1px solid white;">
<input type="checkbox">
<label for="test" id="response"></label> -->
<!-- </div>
</div>
<div class="main-div container-fluid" id="main_div_template">
</div>
<div class="inner-data" id="inner_data" style="display: none;">
<input type="checkbox" name="test" id="test">
<label for="test" id="response"></label>
</div>
</div>
</div> -->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"
integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous">
</script>
<!-- <script>
$(document).ready(function(){
$("#enterRows").val('');
$("#enterRows").change(function(){
let numOfRows = ["Apple","banana","milk","oats"];
var innerData = [{"a":"data1"},{"b":"data2"}];
var inner_data_length = Object.values(innerData);
console.log(inner_data_length)
inner_data_length.forEach(element => {
let res = innerData.map(x => Object.values(x)[0]);
console.log(res[0]);
// console.log(innerData.map(value,'a'));
});
// console.log(Object.entries(innerData));
// console.log(inner_data_length[1].length);
let main_div_template = document.getElementById('main_div_template');
main_div_template.innerHTML="";
let ques_response = document.getElementById('ques_response');
// ques_response.innerHTML="";
console.log("hi");
console.log(numOfRows);
var i=0;
for (let numRow=0; numRow<numOfRows.length; numRow++){
console.log(numRow);
ques_response.innerHTML="";
document.getElementById('question').innerHTML=numOfRows[numRow];
for(let data=0;data<inner_data_length[i].length;data++){
console.log(i);
// for(let appendData = 0 ; appendData<inner_data_length[data].length;appendData++){
console.log("data",data);
console.log(innerData[data]);
// ques_response.setAttribute("id","ques_response_" + data);
document.getElementById('response').innerHTML=inner_data_length[i][data];
let dataToBeCloned = document.getElementById('inner_data').cloneNode(true);
dataToBeCloned.id = 'inner_data_'+ numRow;
dataToBeCloned.querySelector('label').id = 'response_'+numRow+data;
// dataToBeCloned.setAttribute("id","inner_data_"+ data);
dataToBeCloned.style.display='';
ques_response.appendChild(dataToBeCloned);
// }
}
i++;
// data=0;
let rowToBeCloned = document.getElementById('main_div').cloneNode(true);
rowToBeCloned.setAttribute("id","main_div"+numRow);
rowToBeCloned.style.display='';
main_div_template.appendChild(rowToBeCloned);
}
});
});
</script> -->
<script>
$(document).ready(function(){
$("#text").keydown(function (e) {
$(this).val(limitRowsAndChar($(this).val()))
});
function limitRowsAndChar(value,maxRows=7,maxChar=10){
let lines = value.split(/(\r\n|\n|\r)/gm);
console.log("lines",lines);
for (var i = 0; i < lines.length; i++) {
if (lines[i].length > maxChar) {
lines[i] = lines[i].substring(0, maxChar);
console.log(lines[i]);
alert("max character limit exceeded")
}
}
let linesEntered = lines.filter((line, index) => {
return line != '\n';
});
console.log("lines Entered",linesEntered);
if (linesEntered.length > maxRows) {
console.log("max lines reached");
// lines=['abc','efg,'klji\n']
lines[lines.length - 1] = lines[lines.length - 1].substring(0, lines[lines.length - 1].length - 2)
alert("max lines reached");
// return false;
}
return (lines.join(''));
}
// var linesUsed = $('#linesUsed');
// $('#text').keydown(function (e) {
// newLines = $(this).val().split("\n").length;
// console.log("nexlines",newLines);
// // linesUsed.text(newLines);
// if (e.keyCode == 13 && newLines >= lines) {
// // linesUsed.css('color', 'red');
// alert("max limit exceeded");
// return false;
// }
// });
});
// var wordLen = 10; // Maximum word length
// function checkWordLen(obj) {
// var len = obj.value.split(/[\s]+/);
// console.log(len)
// if (len.length > wordLen) {
// alert("You cannot put more than " + wordLen + " words in this text area.");
// obj.oldValue = obj.value != obj.oldValue ? obj.value : obj.oldValue;
// obj.value = obj.oldValue ? obj.oldValue : "";
// return false;
// }
// return true;
// }
</script>
</html>Editor is loading...