JS模仿编辑器实时改变文本框宽度和高度大小的方法

本文实例讲述了JS模仿编辑器实时改变文本框宽度和高度大小的方法。分享给大家供大家参考。具体如下：

这里演示JS模仿编辑器中实时改变文本框大小，包括宽度和高度的方法，在一些在线编辑器，比如eWebEditor中，就有一个功能，让文本框不断的增大或减小，以适应页面的大小，这个功能是如何实现的呢？请您参考一下这个程序，相信你会从中获益。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-editor-cha-width-height-codes/

具体代码如下：

<html>
<head>
<title>改变文字区域的高宽</title>
<script language="javascript">
<!--
 function addrows(){
  rows = form1.txt.rows;
  rows++;
  form1.txt.rows = rows;
 }
 function addcols(){
  cols = form1.txt.cols;
  cols++;
  form1.txt.cols = cols;
 }
//-->
</script>
</head>
<body>
<form name="form1">
 <textarea name="txt"></textarea>
 <input type="button" value="增加高" onClick="addrows()">
 <input type="button" value="增加宽" onClick="addcols()">
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS给Textarea文本框添加行号的方法

    JS给Textarea文本框添加行号的方法

    本文实例讲述了JS给Textarea文本框添加行号的方法.分享给大家供大家参考.具体如下: 这里使用JS实现让Textarea文本框显示行号的功能,每一行的前面都会有下数字序号,如果用来显示代码的话,可以直接找到某一行,如果不显示行号,则还要自己手功去查,想要此功能,你只需设置好TextArea ID,并加入代码中的JavaScript代码部分即可,文本框的长宽则是由CSS来控制的,你可试着修改一下,长宽的显示要与JS相匹配. 运行效果截图如下: 在线演示地址如下: http://demo.jb

  • js实现文本框只允许输入数字并限制数字大小的方法

    js实现文本框只允许输入数字并限制数字大小的方法

    本文实例讲述了js实现文本框只允许输入数字并限制数字大小的方法.分享给大家供大家参考.具体如下: 这是一个很个性的输入框特效,规定文本框只允许输入数字,如果你执意要输入其它的字符,则输入的字符将自动消失,除非你输入的是规定内的字符格式,并且对输入数字大小也有限制!为保证兼容性,请使用火狐浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-limit-num-codes/ 具体代码如下: <!DOCTYPE html PUB

  • 鼠标焦点离开文本框时验证的js代码

    利用js来验证文本框的值 复制代码 代码如下: <script> function onblurs(){ if(frm.name.value==""){ alert("请输入您的名字!"); }else if(frm.funny.value==""){ alert("爱好不得为空哦!"); } } </script> <form name="frm"> <tr>

  • js实时计算字数提醒的文本框

    js实时计算字数提醒的文本框

    自己想了一下应该是用JavaScript实现的,今天把它做出来了.原理很简单就是根据文本框触发的onkeyup事件来获得当前文本框字符的长度,然后文本框允许输入的最大字符数来减去当前的字符数,并用label控件显示出来就可以了. 效果图:演示代码: enter function keypress1() //text输入长度处理 { var text1=document.getElementById("mytext1").value; var len=15-text1.length; v

  • JS文本框不能输入空格验证方法

    1.只是不能输入空格 复制代码 代码如下: <input type="text" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')"> 2.不能输入空格及英文状态下的逗号 复制代码 代码如下: <input type="text" onkeyup="this.value=this.value.replace(/[, ]/g,'')"> 3. 复制

  • js中判断文本框是否为空的两种方法

    复制代码 代码如下: //用户名非空验证 function checkUserName(){ var name = document.myform.txtUser; //在这里我认为: name 代表的name 为 txtUser 的文本框 if(name.value.length==0){ alert("请输入用户名"); name.focus(); return false; }else{return true;} } //密码非空验证+确认验证 function checkPas

  • js获取光标位置和设置文本框光标位置示例代码

    复制代码 代码如下: <script type="text/javascript">        function getTxt1CursorPosition(){            var oTxt1 = document.getElementById("txt1");            var cursurPosition=-1;            if(oTxt1.selectionStart){//非IE浏览器           

  • 在js(jquery)中获得文本框焦点和失去焦点的方法

    先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号')

  • JS简单限制textarea内输入字符数量的方法

    本文实例讲述了JS简单限制textarea内输入字符数量的方法.分享给大家供大家参考.具体如下: 这里演示JS限制一个area内的字符不能超过255,多余则截取. 代码如下: <script> function getStringUTFLength(str) { var value = str.replace(/[\u4e00-\u9fa5]/g," "); //将汉字替换为两个空格 return value.length; } function leftUTFString

  • JS判断文本框内容改变事件的简单实例

    oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur): onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,

  • 简单JS自动提示文本框代码

    简单JS自动提示文本框代码

    本例以颜色为例,为用户提供自动提示,展示效果和运行结果如图: 1.建立框架结构: 复制代码 代码如下: <body> <form method="post" name="myForm1"> Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" /> <

  • 文本框中,回车键触发事件的js代码[多浏览器兼容]

    判断是否按下的为回车非常简单: 复制代码 代码如下: function EnterPress(){ if(event.keyCode == 13){ ... } } IE6的onkeypress会接受"回车事件",而onkeydown不会接受 IE8的onkeypress不会接受"回车事件",而onkeydown会接受 ...不用纠结于此,两个都写上吧 复制代码 代码如下: <input type="text" onkeypress=&qu

  • js限制文本框输入长度两种限制方式(长度、字节数)

    功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js 复制代码 代码如下: function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var isbyte;//是否使用字节长度限制(1汉字=2字符) var txtlength;//到达限制时,字符串的长度 var

  • js各种验证文本框输入格式(正则表达式)

    不能为空 <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> 只能输入英文和数字<input onblur="if(/[^0-9a-zA-Z]/g.test(value))alert('有错')"><input onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"/><

  • js限制文本框的输入内容代码分享（3类）

    js限制文本框的输入内容代码分享（3类）

    为大家分享的JavaScript限制文本框的输入内容代码如下 <style type="text/css"> <!-- .STYLE1 { color: #0099FF; font-weight: bold; font-size: x-large; } --> </style> <p> </p> <p> </p> <p> </p> <p> </p> <

  • 改变文本框字体颜色的js脚本

    function colors(color){ document.form1.id.style.color=color; } 红色 绿色 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 捕获input文本框内容改变事件的js代码

    网上一位老兄采用如此方法: readonly :是文本框不可输入. function dochg(){ document.getElementById("testId").value = "test" } setTimeout("dochg()",1000) function showValue(obj){ alert("changed value is " + obj); } [Ctrl+A 全选 注:如需引入外部Js需刷新

  • js计算文本框输入的字符数

    js计算文本框输入的字符数

    使用JavaScript实时的计算用户当前输入的字符数函数代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript统计字符数</title> <script language="javascript"> function C

  • js限制文本框只能输入数字方法小结

    有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 复制代码 代码如下: <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.valu

  • 利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)

    一共两个页面,分别如下: 一.创建页面create.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

随机推荐