首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何创建可滚动的文本框?

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

Stack Overflow用户
提问于 2013-08-13 23:51:46
回答 2查看 65.4K关注 0票数 12

目前,该站点有以下css类,用于表单中的备注(较长文本)条目。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.scrollabletextbox {
    height:100px;
    width:200px;
    font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
    font-size: 82%;
    overflow:scroll;
}

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

该表单使用下面的html (带有一点php)来实现大文本框

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<input type="text" class="scrollabletextbox" name="note" value="<?php echo $note; ?>">

提前感谢您的帮助。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-08-13 23:57:34

尝试用textarea标签替换input type="text"

将您的代码更改为:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<textarea class="scrollabletextbox" name="note">
  <?php echo $note; ?>
</textarea>

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

Read more info about textarea tag

票数 13
EN

Stack Overflow用户

发布于 2013-08-13 23:57:20

我会将控件从input切换到textarea,后者将默认执行您请求的功能。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<textarea class="scrollabletextbox" name="note"><?php echo $note; ?></textarea>

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

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18221104

复制
相关文章
flexbox 布局
即使不知道视窗大小或者未知元素情况之下都可以智能的、灵活的调整和分配元素和空间两者之间的关系。简单的理解,就是可以自动调整,计算元素在容器空间中的大小。
双面人
2019/07/03
9140
FlexBox布局
概述 FlexBox(弹性框布局):英文全称the flexible box Module,FlexBox旨在提供了在不同尺寸设备上都能保持一致的布局方式。 其主要思想是:让容器有能力让其子项目能够改变其宽度|高度|顺序,以最佳方式填充可用空间。在布局中,首先得确定主轴方向(flexDirection),主轴组件的对齐方式(justifyContent),侧轴组件的对齐方式(alignItems),通过以上四点可以基本确定布局。 注:FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Las
xiangzhihong
2018/01/26
2.9K0
学习CSS Flexbox,玩Flexbox 青蛙游戏
在学习CSS中,Flexbox是一个比较实用的CSS 布局属性,但很复杂,有些人可能没法很快掌握,今天我要推荐一个跟这个相关的游戏,在游戏中学习Flexbox,这岂不是一个让人觉得很快乐的事吗?
前端开发博客
2020/11/02
1K0
学习CSS Flexbox,玩Flexbox 青蛙游戏
flexbox 伸缩布局
row: 左-> 右 ,row-reverse: 右 -> 左 ,column:上 -> 下 ,column-reverse:下 -> 上
frontoldman
2019/09/03
1.3K0
Flexbox布局杂谈
也许你并不知道Flexbox是什么,但是想必你肯定听说过React Native、Weex、和Texture(AsyncDisplayKit),Flexbox就是这些知名布局库所采用的布局思路。甚至苹果官方在iOS9的时候推出的UIStackView,采用的也是FlexBox思路来实现布局的。
拉维
2019/08/12
2.2K0
Flexbox布局杂谈
Flexbox布局指南
本文翻译来自https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Helloted
2022/06/07
1.3K0
Flexbox布局指南
PPT放大招之绘制一幅Nature插图
继续用PPT越界干活。以Nature上的一幅插图为例,使用PPT进行绘制,最终需要达成的效果如下图。
百味科研芝士
2020/09/22
2.3K0
PPT放大招之绘制一幅Nature插图
Flexbox 布局的最简单表单
弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了。
ruanyf
2018/10/25
1.6K0
Flexbox 布局的最简单表单
React Native中的FlexBox布局
React Native通过一个基于FlexBox的布局引擎,在所有移动平台上实现了一致的跨平台样式和布局方案。 FlexBox布局目前支持的属性有如下6个: (1)flex (2)flexDirection (3)alignSelf (4)alignItems (5)justifyContent (6)flexWrap 接下来,我们一个一个的看一下每个属性的作用。 (1)flex属性 当一个元素定义了flex属性时,表示该元素是可伸缩的(flex的属性值大于0的时候才可伸缩)。 var Demo = R
IT架构圈
2018/05/31
2.7K0
设置导航栏的背景色和标签栏的背景色
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/51282200
用户1451823
2018/09/13
2.5K0
flexbox布局指南
伸缩容器是display的计算值为flex或inline-flex的元素,其流内孩子就是伸缩项(flex item)
ayqy贾杰
2019/06/12
1.1K0
flexbox布局指南
iOS 使用flexBox
https://github.com/facebook/yoga/tree/master/YogaKit
用户2814378
2022/11/07
1.5K0
iOS 使用flexBox
Flexbox 练习和总结
练习地址: http://flexboxfroggy.com/ Welcome to Flexbox Froggy, a game where you help Froggy and friends by writing CSS code! Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the foll
SmileSmith
2018/04/16
1.3K0
Bulma — 基于Flexbox的CSS框架
今天我们来介绍一款CSS框架,它的名字是Bulma。它是一个现代的,基于Flexbox的CSS框架。下面是它的一系列特点,更多示例可点击「阅读原文」进行查看。 Simple grid system Just add columns, they will resize themselves Flexible navbar Include any type of element, they will remain vertically aligned Versatile media object A simpl
时见疏星
2018/06/01
6480
GIF图解FlexBox
做过Web开发的前端人员都很清楚,传统的页面布局基于盒子模型,对于一些伸缩性的布局,处理起来很麻烦。
前端达人
2019/01/21
1.7K0
GIF图解FlexBox
flexbox简易教程
实际案例 banner <div class="banner"> <div class="banner-content"> <h1>Stripe</h1> <p>Cool payment API</p> <a href="#" class="btn-twitter">Start now</a> </div> </div> <style> .banner { height: 100vh; color: white;
lilugirl
2020/02/18
7980
flexbox简易教程
Flexbox布局指南
Flexbox布局概念 Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防止内容溢出,确保元素拥有恰当的行为的布局方式。使用Flexbox来布局更容易,可以使用更少的代码,更简单的方式实现更复杂的布局,例如对齐方式,排列方向,排列顺序(这也是Flexbox布局的核心能力所在),弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子元素
xiangzhihong
2018/02/05
1.8K0
Flexbox布局指南
在YUV图像上根据背景色实现OSD反色
所谓的OSD其实就是在视频图像上叠加一些字符信息,比如时间,地点,通道号等, 在图像上叠加OSD通常有两种方式: 一种是在前端嵌入式设备上,在图像数据上叠加OSD, 这样客户端这边只需解码显示数据即可。另一种是PC客户端在接收到前端设备图像,解码之后,进行叠加。这两种都是比较常见的方式。 OSD具有字符型(Font-Based)和位图型(Bit-Map)两种类型。 字符型OSD:为了节约显示缓存,早期及低成本的解决方案中使用字符型OSD发生器,其原理是将OSD中显示内容按照特定的格式(12×18、12×
lcyw
2022/06/10
1.5K0
在YUV图像上根据背景色实现OSD反色
CSS Flexbox 青蛙游戏
在学习CSS中,Flexbox是一个比较实用的CSS 布局属性,但很复杂,有些人可能没法很快掌握,今天我要推荐一个跟这个相关的游戏,在游戏中学习Flexbox,这岂不是一个让人觉得很快乐的事吗?
前端开发博客
2020/11/04
7210
CSS Flexbox 青蛙游戏
圆形模糊
算法:圆形模糊是生成圆形模糊虚化遮罩,应用在对人脸(物体)检测后,进行人脸(物体)模糊虚化处理,通过适当的旋转、平移和缩放图像之后即可适当地遮住人脸(物体)。
裴来凡
2022/05/29
1.7K0
圆形模糊

相似问题

圆形细胞参考

28

Flexbox网格:细胞不会生长

11

多细胞VBA中的圆形时间

10

jTable细胞背景色

33

重复细胞背景色

26
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文