ボタンを<td>
クリックすると、 textArea に変わる があります。これはうまくいきます。また、機能する characterCounterEdit 関数もあります。唯一のことは、テキストエリアでカーソルをクリックしたときにのみ文字カウンターが機能することです。editCommentToggle() にジャンプしたら、すぐに文字カウンター関数をトリガーしたいと考えています。
JavaScript:
function editCommentToggle( id )
{
theRow = document.getElementById("id"+id);
//user = theRow.cells[0].innerHTML;
//date = theRow.cells[1].innerHTML;
com = theRow.cells[2].innerText ;
idx = 2;
maxlength = 250;
// Comment field
cell = theRow.cells[idx];
while( cell.childNodes.length > 0 ) cell.removeChild(cell.childNodes[0]);
spanTag = document.createElement("span");
spanTag.innerHTML = "You have <strong><span id='commentsCounter'>"+maxlength+"</span></strong> characters left.<br/>";
cell.appendChild(spanTag);
element = document.createElement("textarea");
element.id="commentsTextArea-"+id;
element.rows="3";
element.value = com;
element.style.width = "400px";
element.maxLength = "250";
element.onfocus = element.onkeydown = element.onkeyup = function(){return characterCounterEdit('commentsCounter', maxlength, this);};
cell.appendChild(element);
$(function()
{
setTimeout("syncCommentTableSizes()",0); <%-- Run after HTC code --%>
});
// Actions field
cell = theRow.cells[++idx];
while( cell.childNodes.length > 0 ) cell.removeChild(cell.childNodes[0]);
link = document.createElement("a");
link.href = 'javascript:saveComment('+id+')';
element = document.createElement( "img" );
element.className = "smallicon edit"; // check if we need this changed
element.src="../images/icon_save.gif";
element.border="0";
element.alt = "Save";
link.appendChild( element );
cell.appendChild(link);
cell.appendChild( document.createTextNode(" ") );
link = document.createElement("a");
link.href = 'javascript:cancelCommentEdit('+id+')';
element = document.createElement( "img" );
element.className = "smallicon delete"; // check if we need this changed
element.src="../images/icon_cancel.gif";
element.border="0";
element.alt = "Cancel";
link.appendChild(element);
cell.appendChild(link);
}
function characterCounterEdit(id, maxLen, inputElement)
{
spanId = document.getElementById(id);
if (spanId)
{
// Update the counter the user sees.
var whatIsLeft = maxLen - inputElement.value.length;
if ( whatIsLeft < 0 ) whatIsLeft = 0;
spanId.innerText = whatIsLeft;
}
// Restrict user from entering more than the maxlen.
if ( inputElement.value.length > maxLen )
{
inputElement.value = inputElement.value.substring( 0, maxLen );
}
}