`

单行文本框、多行文本框及滚动条的应用

阅读更多

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
 .focus{
  border: 1px solid #f00;
  background: #fcc;
 }
 input, textarea{
  width:12em;
  border: 1px solid #888;
 }

 div{
    padding:2px;
 
 * { margin:0; padding:0;font:normal 12px/17px Arial; }
 .msg {width:300px; margin:100px; }
 .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}
 .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }
 .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}

 
</style>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script type="text/javascript">
 $(function(){
  $(":input").focus(function(){
   $(this).addClass("focus");
  }).blur(function(){
   $(this).removeClass("focus");
  });
  

  var $comment=$("#comment");
  $(".bigger").click(function(){
   if(!$comment.is(":animated")){ //判断是否处于动画
    if($comment.height()<500){
     //$comment.height($comment.height()+50);
     $comment.animate({height: "+=50"}, 400);
    }
   }
  })
  
  $(".smaller").click(function(){
   if(!$comment.is(":animated")){
    if($comment.height()>50){
     $comment.animate({height: "-=50"},400);
    }
   }
  })
  
  $(".up").click(function(){
   if(!$comment.is(":animated")){
    $comment.animate({scrollTop: "-=50"},400);
   }
  })
  $(".down").click(function(){
   if(!$comment.is(":animated")){
    $comment.animate({scrollTop: "+=50"},400);
   }
  })
 })
</script>
</head>

<body>

 <form action="#" method="post" id="regForm">
  <fieldset>
   <legend>个人基本信息</legend>
   <div>
    <label for="username">名称:</label>
    <input id="username" type="text">
   </div>
   <div>
    <label for="pass">密码:</label>
    <input id="pass" type="password">
   </div>
   <div>
    <label for="msg">详细信息:</label>
    <textarea id="msg"></textarea>
   </div>
  </fieldset>
  
  <div class="msg_caption">
   <span class="bigger">放大</span>
   <span class="smaller">缩小</span>
   <span class="up">向上</span>
   <span class="down">向下</span>
  </div>
  <div>
   <textarea id="comment" rows="8" cols="80">ssssssssssdsssssssdaffsdfsdfs</textarea>
  </div>
 </form>
</body>

分享到:
评论

相关推荐

    VB 仿QQ单行文本框-下拉列表-按钮-日历控件最

    - `VScroll.ctl`:垂直滚动条控件,用于在内容超出可视区域时提供滚动功能。 - `V_CheckBox.ctl` 和 `V_OptionButton.ctl`:复选框和选项按钮,用于提供多选或单选的选项,用户可以通过它们进行是/否或多项选择。 ...

    VC在编辑框中实现多行显示

    总之,在VC++中实现固定格式的多行显示编辑框涉及到对CEdit类的风格设置、事件处理以及可能的滚动条配置。通过理解和实践这些技术,你可以创建出符合需求的用户界面,同时这也是对MFC和VC++控件操作基础的巩固。

    设置多行显示与滚动条.rar

    在IT界,尤其是在软件开发和用户界面设计中,设置多行显示与滚动条是常见的需求。这涉及到文本处理、布局管理以及用户交互等多个方面。在本文中,我们将深入探讨这个主题,了解如何在不同的编程环境和应用中实现这一...

    c#卷标、文本框与按钮练习

    例如,Text属性用于获取或设置显示的文本,Multiline属性可设定文本框是否为多行模式,ScrollBars属性用于控制滚动条的显示。同时,还可以监听TextChanged事件来处理用户输入的变化。 ```csharp TextBox textBox1 =...

    C#显示水平滚动条

    1. **确保`WordWrap`属性为`false`**:如果希望文本框能够显示水平滚动条,那么首先需要确保`WordWrap`属性设置为`false`,以避免文本自动换行导致水平滚动条不显示。 2. **调整文本框宽度**:适当增加文本框的宽度...

    文本框自动换行

    1. **多行文本框**:与单行文本框不同,多行文本框允许用户输入多行文本。在HTML中,我们可以使用`&lt;textarea&gt;`标签来创建一个多行文本框;在Windows Forms或WPF中,对应的是`TextBox`控件,并需设置`Multiline`属性...

    mfc文本框的例子

    在Microsoft Foundation Classes (MFC) 库中,文本框(TextBox)是一种常见的用户界面元素,用于接收和显示单行或多行文本输入。本教程将深入探讨MFC中的文本框使用,以及如何在实际项目中创建和操作它们。 一、MFC...

    Flash实现文本框文字滚动.rar

    首先,Flash中的Text Field对象是用于显示单行或多行文本的核心组件。在AS3(ActionScript 3)中,我们可以通过创建TextField类的实例来添加文本字段到舞台上。例如: ```actionscript var textField:TextField = ...

    MFC 文本框

    对于多行文本框,如果内容超过可视区域,可以使用SetScrollbars()方法添加水平或垂直滚动条。 6. **剪贴板操作**: CEdit控件支持常见的剪贴板操作,如Copy、Cut、Paste。这些可以通过成员函数如CopyToClipboard...

    android输入框与文本框加滚动条scrollview示例

    在Android开发中,为了应对小屏幕设备上的...总之,通过使用ScrollView,开发者可以在Android应用中轻松地实现输入框和文本框的滚动条功能,适应不同屏幕大小和内容量的需求,从而提升用户在小屏幕设备上的交互体验。

    QT_文本框搜索小程序

    搜索结果将被显示在QTextEdit控件中,这是一种在GUI应用中常用的多行文本显示组件,支持格式化文本和滚动条功能。 首先,我们需要了解QT框架。QT是Qt Company开发的一个跨平台的应用程序开发框架,支持多种操作系统...

    Java-GUI.zip_gui界面滚动条_java gui

    它使得开发者可以通过丰富的交互式组件,如按钮、文本框、标签、选择框和滚动条,来构建用户友好的应用界面。在Java中,我们可以使用AWT(Abstract Window Toolkit)和Swing库来实现GUI,而Swing是建立在AWT基础上的...

    c#文本框与面板控件

    3. **滚动条**:如果面板内的控件超出其可视区域,可以通过设置`AutoScroll`属性启用内置滚动条,使得用户能够查看和操作所有内容。 4. **事件处理**:虽然面板本身不直接接收用户输入,但它可以捕获鼠标和键盘事件...

    vs2005 C#文本框程序

    你可以设置其属性,例如`Text`(显示的文本)、`ReadOnly`(是否只读)、`Multiline`(是否多行输入)、`ScrollBars`(滚动条设置)等。此外,还可以处理与文本框相关的事件,如`TextChanged`、`KeyDown`、`KeyUp`等...

    VB文本框突破64k限制 #资源达人分享计划#

    1. **多行文本框**:默认的TextBox控件是单行的,但可以设置它的Multiline属性为True,使其变为多行文本框。这样,用户就可以通过滚动条查看和编辑更多文本。然而,即使如此,仍然存在64KB的限制。 2. **...

    wxPython实现文本框基础组件

    本篇文章将详细介绍如何使用 wxPython 实现文本框基础组件,包括静态文本、单行文本框和多行文本框的创建以及相关样式和功能。 首先,我们来看静态文本组件(StaticText)。静态文本通常用于显示不可编辑的信息,如...

    FormApp0702_c_

    单行文本框通常用于输入短字符串,而多行文本框则适用于显示或编辑大量文本。 2. **属性**: - `Text`: 获取或设置显示在文本框中的文本。 - `ReadOnly`: 设置文本框是否为只读,如果设为`true`,用户无法修改...

    vb中常用控件及其功能.doc

    此外,文本框还支持其他的属性,如ScrollBars属性以控制滚动条的显示,PasswordChar属性用于隐藏输入的字符,以及Font属性来设定字体样式。 在实际应用中,开发者可以结合这些属性和方法,创建出各种满足需求的用户...

    DOS图形界面开发库(GUI)-eCGUI-0.2-Beta-for-DOS-16bit

    TextBox 单行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 EditBox 多行文本框,可设置字体,背景颜色等 完全简体中文输入/显示/编辑 支持 HScrollBar 横向 滚动条 VScrollBar 竖向 滚动条 Select...

    vb中常用控件与功能.doc

    5. **ScrollBars属性**:控制文本框的滚动条,0表示无滚动条,1表示水平滚动条,2表示垂直滚动条,3表示两者都有(需配合MultiLine=True使用)。 6. **SelLength、SelStart和SelText属性**:分别用于获取或设置选中...

Global site tag (gtag.js) - Google Analytics