Question

我想让一个只读输入看起来像带有CSS的pre或div标签。

我原本以为使用textarea会很容易，但这似乎是一项艰巨的任务。我能够隐藏边框和调整大小，但无论出于何种原因，我无法确定textarea的高度取决于它的内容。

我已经看到很多关于使用javascript来自动调整textareas的东西，但是如果它是不需要javascript的静态文本，我还能做些什么吗？

更新

我只是想澄清一下这个目的：我想用javascript重写，并用表单提交一个readonly元素，同时不要将它限制在一个内联区域这充其量只会推动滚动，更糟糕的是数据丢失。

更新2

根据请求，我创建了一个小提琴来展示我正在尝试做的事情的示例：http://jsfiddle.net/BUwdE/1/。

textarea[readonly] {
    width: 100%;
    border: 0;
    resize: none;
    overflow: hidden;
}

您会看到内容在底部被截止，因为textarea的高度不是由其内容决定的。

Answer 1

我实际上试图做你一直在做的事情。但是由于它将是只读输入，因此实际上我最终将CSS应用于div元素。这将是一个骇人听闻的骇客。

HTML

import React from 'react';
import {Radar} from 'react-chartjs-2';

const data = {
  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: 'rgba(179,181,198,0.2)',
      borderColor: 'rgba(179,181,198,1)',
      pointBackgroundColor: 'rgba(179,181,198,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(179,181,198,1)',
      data: [65, 59, 90, 81, 56, 55, 40]
    },
    {
      label: 'My Second dataset',
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      pointBackgroundColor: 'rgba(255,99,132,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(255,99,132,1)',
      data: [0, 48, 40, 19, 96, 0, 100]
    }
  ]
};

export default React.createClass({
  displayName: 'RadarExample',

  render() {
    return (
      <div>
        <h2>Radar Example</h2>
        <Radar data={data} />
      </div>
    );
  }
});

CSS

<div class="faketextarea"> some long long text </div>

Answer 2

您可以使用rows属性在HTML中指定textarea的高度，但不会自动调整大小。您可能需要向W3C CSS工作组求助以获得您想要的内容。

<textarea name="whatWillBeSentToServer" rows="4" readonly="readonly">

使readonly textarea的高度由其内容决定

2 个答案: