我在 css 中向文本框中添加文本时遇到问题答案

【问题标题】：I am having trouble adding text to a text box in css我在 css 中向文本框中添加文本时遇到问题
【发布时间】：2015-11-26 04:54:21
【问题描述】：

我正在尝试创建一个包含文本的简单文本框。我在网上看过，但没有任何东西对我有用。这是我的 TextBox.css 文件

div.TextBox {
position: relative; 
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) 
}

.TextBox-input {}

这是我的 TextBox.js 文件

import React, { PropTypes } from 'react';
import withStyles from '../../decorators/withStyles';
import styles from './TextBox.css';

@withStyles(styles)
class TextBox {

  static propTypes = {
    maxLines: PropTypes.number
  };

  static defaultProps = {
    maxLines: 1
  };

  render() {
    return (
      <div className="TextBox">
        {this.props.maxLines > 1 ?
          <textarea {...this.props} className="TextBox-input" ref="input" key="input" rows={this.props.maxLines} /> :
          <input {...this.props} className="TextBox-input" ref="input" key="input" />}
      </div>
    );
  }

}

export default TextBox;

【问题讨论】：

您正在尝试通过 CSS 添加文本？

标签： javascript html css textbox reactjs

【解决方案1】：

您的 CSS 有点失控。由于某种原因，您指定了两次position，我并不清楚您要完成什么。能详细点吗？

无论如何，我相信您的问题是您使用的是position: absolute，并且您没有指定宽度或高度。尝试添加width: 100%、height: 100%，你至少应该在屏幕上看到一些东西。

您并不总是需要宽度和高度，但由于绝对定位会将元素从页面的正常流程中移除，因此浏览器需要了解在哪里绘制它。有时您希望元素占据所有可用空间，您可以通过将所有四个边指定为 0 来实现，以便“拉伸”元素：

top: 0;
bottom: 0;
left: 0;
right: 0;

【讨论】：

【解决方案2】：

你的问题不是很清楚。首先，如果您尝试通过 CSS 将“文本”添加到文本框中，则不能，CSS 用于设置 HTML 元素的样式。

使用 jQuery 之类的东西可以生成带有指定文本的文本框，这里是一个例子：

https://jsfiddle.net/fvk2v1so/7/

用户可以在文本字段中输入内容并按“添加文本框 " 并且它将以该文本作为值添加文本区域元素。

 $('.add_button').on('click', function(e){
    //When user clicks "add textbox" ensure they have added text.
    if(!$('.add_text').val().length){
        $('.error').show();
    }
    //If there is text, append textbox with text to results div.
    else{
        //Hide error message
        $('.error').hide();

        $('.results').append('<textarea class="textbox">' + $('.add_text').val() + '</textarea>')
    }
});

同样，不确定您具体要问什么，但希望这可以帮助您走上正轨？

【讨论】：