Html 如何创建可滚动的文本框?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18221104/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:07:48  来源:igfitidea点击:

How do I create a scrollable textbox?

htmlcss

提问by aray12

Currently, the site has the following css class that is intended to be used for note (longer texts) entries in a form.

目前,该站点具有以下 css 类,旨在用于表单中的注释(更长的文本)条目。

.scrollabletextbox {
    height:100px;
    width:200px;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 82%;
    overflow:scroll;
}

The size of the box and other styling register correctly, but the text start vertically centered and never line breaks. The only way to view the text completely is to move the cursor left/right.

框的大小和其他样式正确注册,但文本从垂直居中开始,从不换行。完全查看文本的唯一方法是向左/向右移动光标。

The form uses the following html (with a little php) to implement the large text box

表单使用如下html(带一点php)实现大文本框

<input type="text" class="scrollabletextbox" name="note" value="<?php echo $note; ?>">

Thank you in advance for any help.

预先感谢您的任何帮助。

回答by Wilq

Try replacing input type="text"with textareatag.

尝试更换input type="text"textarea标签。

Change your code to:

将您的代码更改为:

<textarea class="scrollabletextbox" name="note">
  <?php echo $note; ?>
</textarea>

It sends data just as a normal inputtag, so you can get data from it with the same methods.

它像普通input标签一样发送数据,因此您可以使用相同的方法从中获取数据。

Read more info about textareatag

阅读有关textarea标签的更多信息

回答by Kevin Bowersox

I would switch the control from an inputto a textarea, which will perform the functionality you request by default.

我会将控件从 an 切换input到 a textarea,默认情况下它将执行您请求的功能。

<textarea class="scrollabletextbox" name="note"><?php echo $note; ?></textarea>

JSFIDDLE:http://jsfiddle.net/rJy94/

JSFIDDLE:http : //jsfiddle.net/rJy94/