在JavaScript中縮小表格

從未使用JavaScript之前和我試圖修復此表格在共享點。我想這個文本框很小（如1行），直到用戶點擊它，然後它應該展開成一個更大的文本框，像10行。我很抱歉，如果這已被回答，我甚至不知道我應該尋找什麼。下面是代碼，我不工作，但確實彈出錯誤信息（我沒有寫這個代碼）：在JavaScript中縮小表格

alert(DescriptionID); 
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){ 
    document.getElementById(DescriptionID).rows= "10"; 
}); 
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){ 
    document.getElementById(DescriptionID).rows= "1"; 
});

編輯：這裏是什麼當前的代碼將顯示：

EDIT2：感謝您們的幫助，我們即將完成！我現在可以至少明白它的好處了！這是代碼的圖片。該對象實際上是一個「ms-formbody」？

而另一個編輯：因此，這裏是我使用Johhny的代碼後，我得到的錯誤：

來源

2016-06-14 MattCucco

Java和JavaScript不是相同的語言。我會編輯你的問題來反映這一點。這兩個人經常感到困惑，所以我想盡我所能傳播意識。 –

是不是這個JavaScript？ – MattCucco

如果您希望任何人都能夠提供幫助，則可能需要包含錯誤消息。因爲很可能變量DescriptionId設置不正確...... –

如果您正在使用jQuery，這可能會爲你工作：

HTML：

的JavaScript：

$(document).ready(function() { 
    $('#expandingTextarea').on('mouseover', function() { 
    $(this).attr('rows', '10'); 
    }); 

    $('#expandingTextarea').on('mouseout', function() { 
    $(this).attr('rows', '1'); 
    }); 
});

我創建了一個例子here。

更新：

使用點擊事件改變/切換到行數：

$(document).ready(function() { 
    $('#expandingTextarea').on('click', toggleExpand); 

    function toggleExpand() { 
    var oldRowCount = $(this).attr('rows'); 
    var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1; 
    $(this).attr('rows', newRowCount); 
    } 
});

演示here。

來源

2016-06-14 17:26:01 JohnnyCoder

這正是我想要發生的！現在我只需要弄清楚如何放入我的代碼中...... – MattCucco

希望它可以工作，您還可以在此處看到另一個Stack問題：http://stackoverflow.com/q/4417161/1058612。 – JohnnyCoder

我想我可能希望它打開一個點擊功能，以便如果用戶正在鍵入並將鼠標從框中彈出，它不會關閉它們。如果用戶點擊框，它會打開，並且如果再次點擊，它會縮小嗎？是否可以將函數更改爲mousedown？對不起很難！新手在這裏！ – MattCucco

改變，而不是「行」屬性的高度。

用chrome打開頁面，打開開發者工具（View-> Developer-> Developer Tools），然後用「inspect」選擇你想要操作的文本區域。

嘗試玩弄該元素的CSS。然後，編寫你的JavaScript來改變你想要的屬性。

https://developer.chrome.com/devtools

來源

2016-06-14 17:12:35

這是一個非常愚蠢的問題，但是您是否知道在g舊Internet Explorer中這樣做？在我的公司電腦上，我無法下載其他網絡瀏覽器。我也有Firefox，但它不會讓我加載這些東西。 – MattCucco

試圖改變我有什麼，它沒有任何區別 – MattCucco

您顯示的代碼看起來很好，但DescriptionID應包含描述框的ID。您可以通過右鍵單擊描述表單並單擊「檢查元素」來檢查它是什麼。然後在代碼的開頭分配var DescriptionID =「someID」。另外，你可能會考慮改變高度，而不是行。如果表單沒有ID，請查找一個選項來更改HTML並添加一個。如果你沒有這樣的選擇，你仍然可以實現你想做的事情，但你必須超越getElementById。

來源

2016-06-14 17:24:02

事實上，你不需要JS來實現你想要的。 CSS可以爲你做。

<!--html--> 
<textarea class="descr">This is description</textarea> 

/*css*/ 
.descr {height: 20px;} 
.descr:hover, .descr:focus {height: 120px;}

來源

2016-06-14 17:24:14

我不知道我將如何實現？你能否給我一個愚蠢的版本？ – MattCucco

但OP要求textarea點擊時展開。這僅適用於將鼠標懸停在textarea上的情況。 –

最初它是'mouseover'。確定'.descr：focus'而不是'：hover' –

在JavaScript中縮小表格

回答

相關問題