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程序设计有所帮助。
相关推荐
-
鼠标焦点离开文本框时验证的js代码
利用js来验证文本框的值 复制代码 代码如下: <script> function onblurs(){ if(frm.name.value==""){ alert("请输入您的名字!"); }else if(frm.funny.value==""){ alert("爱好不得为空哦!"); } } </script> <form name="frm"> <tr>
-
改变文本框字体颜色的js脚本
function colors(color){ document.form1.id.style.color=color; } 红色 绿色 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
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简单限制textarea内输入字符数量的方法
本文实例讲述了JS简单限制textarea内输入字符数量的方法.分享给大家供大家参考.具体如下: 这里演示JS限制一个area内的字符不能超过255,多余则截取. 代码如下: <script> function getStringUTFLength(str) { var value = str.replace(/[\u4e00-\u9fa5]/g," "); //将汉字替换为两个空格 return value.length; } function leftUTFString
-
捕获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给Textarea文本框添加行号的方法
本文实例讲述了JS给Textarea文本框添加行号的方法.分享给大家供大家参考.具体如下: 这里使用JS实现让Textarea文本框显示行号的功能,每一行的前面都会有下数字序号,如果用来显示代码的话,可以直接找到某一行,如果不显示行号,则还要自己手功去查,想要此功能,你只需设置好TextArea ID,并加入代码中的JavaScript代码部分即可,文本框的长宽则是由CSS来控制的,你可试着修改一下,长宽的显示要与JS相匹配. 运行效果截图如下: 在线演示地址如下: http://demo.jb
-
js计算文本框输入的字符数
使用JavaScript实时的计算用户当前输入的字符数函数代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript统计字符数</title> <script language="javascript"> function C
-
简单JS自动提示文本框代码
本例以颜色为例,为用户提供自动提示,展示效果和运行结果如图: 1.建立框架结构: 复制代码 代码如下: <body> <form method="post" name="myForm1"> Color: <input type="text" name="colors" id="colors" onkeyup="findColors();" /> <
-
JS判断文本框内容改变事件的简单实例
oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur): onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,
-
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限制文本框的输入内容代码分享(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实时计算字数提醒的文本框
自己想了一下应该是用JavaScript实现的,今天把它做出来了.原理很简单就是根据文本框触发的onkeyup事件来获得当前文本框字符的长度,然后文本框允许输入的最大字符数来减去当前的字符数,并用label控件显示出来就可以了. 效果图:演示代码: enter function keypress1() //text输入长度处理 { var text1=document.getElementById("mytext1").value; var len=15-text1.length; v
-
在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实现前台动态添加文本框,后台获取文本框内容(示例代码)
一共两个页面,分别如下: 一.创建页面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
-
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实现文本框只允许输入数字并限制数字大小的方法
本文实例讲述了js实现文本框只允许输入数字并限制数字大小的方法.分享给大家供大家参考.具体如下: 这是一个很个性的输入框特效,规定文本框只允许输入数字,如果你执意要输入其它的字符,则输入的字符将自动消失,除非你输入的是规定内的字符格式,并且对输入数字大小也有限制!为保证兼容性,请使用火狐浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-limit-num-codes/ 具体代码如下: <!DOCTYPE html PUB
-
文本框中,回车键触发事件的js代码[多浏览器兼容]
判断是否按下的为回车非常简单: 复制代码 代码如下: function EnterPress(){ if(event.keyCode == 13){ ... } } IE6的onkeypress会接受"回车事件",而onkeydown不会接受 IE8的onkeypress不会接受"回车事件",而onkeydown会接受 ...不用纠结于此,两个都写上吧 复制代码 代码如下: <input type="text" onkeypress=&qu
-
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获取光标位置和设置文本框光标位置示例代码
复制代码 代码如下: <script type="text/javascript"> function getTxt1CursorPosition(){ var oTxt1 = document.getElementById("txt1"); var cursurPosition=-1; if(oTxt1.selectionStart){//非IE浏览器
-
js限制文本框输入长度两种限制方式(长度、字节数)
功能/特点: 1.实时显示可输入的字数(字节数) 2.两种限制方式(长度.字节数) 3.中文输入法下可正常使用,无BUG 4.同一页面可以使用多个,相互不干扰 limit.js 复制代码 代码如下: function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var isbyte;//是否使用字节长度限制(1汉字=2字符) var txtlength;//到达限制时,字符串的长度 var
随机推荐
- PHP中的浅复制与深复制的实例详解
- 用jquery.sortElements实现table排序
- 详解Swift 利用Opration和OprationQueue来下载网络图片
- Java 8 新特性终极版指南详解
- 深入理解Python变量与常量
- asp.net+jquery Gridview的多行拖放, 以及跨控件拖放
- 微信公众平台开发之发送文本消息.Net代码解析
- Summernote实现图片上传功能的简单方法
- smarty实现多级分类的方法
- 详解ECMAScript6入门--Class对象
- Python自动化开发学习之三级菜单制作
- 如何设置iframe高度自适应在跨域情况下的可用方法
- 浅谈Express异步进化史
- 简单的jQuery拖拽排序效果的实现(增强动态)
- Windows窗体的.Net框架绘图技术实现方法
- Linux netstat命令详细解析
- SQL Server实现用触发器捕获DML操作的会话信息【实例】
- jQuery插件boxScroll实现图片轮播特效
- C#获取每个年,月,周的起始日期和结束日期的方法
- php-fpm可执行文件出现乱码的解决方法