html表格單元格以更好的方式顯示在輸入框中輸入的文本

我有一個動態的html表格，用戶填寫某些細節。問題是，最後兩個輸入列的數據長度有時會很大。有人可以建議我展示最後兩個輸入框的最佳方式，以便用戶在填寫完細節後能夠輕鬆查看他輸入的內容。在目前的設置下，他一眼就看不到整個輸入框的數據。html表格單元格以更好的方式顯示在輸入框中輸入的文本

HTML：

<table id="master_table" border="0"> 
    <tr> 
    <th>COL1</th> 
    <th>COL2</th> 
    <th>COL3</th> 
    <th>COL4</th> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td> 
    <input type="text" name="col1" class="col1"/> 
    </td> 
     <td> 
    <input type="text" name="col2" class="col2"/> 
    </td> 
     <td> 
    <input type="text" name="col3" class="col3"/> 
    </td> 
     <td> 
    <input type="text" name="col4" class="col4"/> 
    </td> 
     <td> 
    <input type="button" name="addRow" class="add" value='Add'/> 
    </td> 
     <td> 
    <input type="button" name="removeRow" class="removeRow" value='Delete'/> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="4" align="center"> 
    <input type="button" name="submit_data" class="submit" value="Submit" onclick="myFunction()"/> 
    </td> 
    </tr> 
    </table>

小提琴演示：

FIDDLE PAGE

更新： 感謝@dr Manish Joshi

我能夠達到預期的結果HERE。

但它在jsfiddle中正常工作，但是當我嘗試在瀏覽器中運行時，它會拋出javascript錯誤。

遺漏的類型錯誤無法讀取空

來源

2014-07-05 chidori

使用table-layout屬性的特性 '的addEventListener'。 table-layout:fixed將調整單元格以佔用表格的相等空間。

寫：

#master_table{ 
    width:100%; 
    table-layout:fixed; 
}

更新fiddle這裏。

來源

2014-07-05 07:51:36 Hiral

小提琴演示看起來有點崩潰 – chidori

你可以嘗試

<td> 
<input type="text" name="col1" class="col1" length="20"/> 
</td> 
    <td> 
<input type="text" name="col2" class="col2" length="20"/> 
</td> 
    <td> 
<input type="text" name="col3" class="col3" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"/> 
</td> 
    <td> 
<input type="text" name="col4" class="col4" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"/> 
</td> 
    <td>

的jsfiddle - http://jsfiddle.net/Vu8HC/6/

編輯：

按codepen.io/vsync/pen/czgrf，你的代碼看起來像textarea的如下

<html> 
<head> 
<style> 
body{ background:#c0c0c0; color:#8c001a; } 
/*('box-sizing' will not work with this code)*/ 
textarea{ 
    /* box-sizing: padding-box; */ 
    overflow:hidden; 
    /* demo only: */ 
    padding:10px; 
    width:250px; 
    font-size:14px; 
    margin:50px auto; 
    display:block; 
    border-radius:10px; 
    border:1px solid #8c001a; 
} 
</style> 
</head> 

<body> 


<textarea rows='1' placeholder='Auto-Expanding Textarea'></textarea> 

<script> 
var textarea = document.querySelector('textarea'); 

textarea.addEventListener('keydown', autosize); 

function autosize(){ 
var el = this; 
    setTimeout(function(){ 
    el.style.cssText = 'height:auto; padding:0'; 
    // for box-sizing other than "content-box" use: 
    // el.style.cssText = '-moz-box-sizing:content-box'; 
    el.style.cssText = 'height:' + el.scrollHeight + 'px'; 
    },0); 
} 
</script> 

</body> 
</html>

您可以在此鏈接的瀏覽器中看到工作示例：http://ayurvedvishva.com/e_nima/jstest

來源

2014-07-05 08:08:53

謝謝，但隨着文本增長的一個問題，水平滾動啓用。對於Microsoft Word中的「Word Wrap」這樣的東西有可能嗎？ – chidori

可能是我應該使用的textrea。我期待着這樣的事情。 http://www.impressivewebs.com/textarea-auto- resize/ – chidori

你需要另一個腳本，你必須將input = text轉換爲input = textarea ...你可以訪問這個鏈接 - http：// codepen.io/vsync/pen/czgrf –

html表格單元格以更好的方式顯示在輸入框中輸入的文本

回答

相關問題