js可编文本框

最新推荐文章于 2023-04-03 21:27:56 发布
原创 最新推荐文章于 2023-04-03 21:27:56 发布 · 184 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#border #javascript #up #function #table #image

该博客主要展示了一个发言区的HTML页面，使用JavaScript实现了表单验证功能，如检查文章主题是否为空、长度是否符合要求，以及内容是否为空。同时，还实现了文本格式处理工具栏，可设置字体、字号、加粗、倾斜等样式，方便用户输入和编辑内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>
<head>
<title>发言区</title>
<SCRIPT language=javascript>
function dologin()
    {
    var doc = document.fmain;
    var text = frames.comment.document.body.innerText;           
    var html = frames.comment.document.body.innerHTML;
    if(doc.subject.value=="")
          {
            alert("You must enter subject");
          doc.subject.focus();
          return false;
          }
    if(doc.subject.length>200)
          {
            alert("The subject is larger,pls increame it");
          doc.subject.focus();
          return false;
          }
    if ((html == "") || (text == ""))           
    {           
        frames.comment.focus();           
        alert("You must enter Comment");           
        return false;           
    }           
    document.fmain.comment.value = html;           
    return true;
    }
</SCRIPT>
</head>
<body>
<table>                                  
<form action="saveword.asp" method="post" name="fmain" onsubmit="return dologin()">                                  
      <tr bgcolor="#09C165">                                   
        <td width="20%" bgcolor="#FFFFFF" height="23" align="right">文章主题:*</td>                                  
        <td width="88%" bgcolor="#F7F7F7" height="23"><input type="text" name="subject" size="50"></td>                                          
      </tr>                                          
      <tr bgcolor="#F7F7F7">                                             
        <td width="20%" valign="top" bgcolor="#FFFFFF" height="51" align="right">内容:<font color="#008000">*</font></td>                                           
        <td width="88%" bgcolor="#F7F7F7" height="51">                                            
        <SCRIPT LANGUAGE="JavaScript">                                     
            <!--
            //鼠标事件的工具栏按钮的处理                                     
            var buttonImage_normal = new Image ();                                     
            buttonImage_normal.src = "images/button_normal.gif";                                     
            var buttonImage_up = new Image ();                                     
            buttonImage_up.src = "images/button_up.gif";                                     
            var buttonImage_down = new Image ();                                     
            buttonImage_down.src = "images/button_down.gif";                                                                        
            // -->                                     
        </SCRIPT>                                     
                                     
        <SCRIPT LANGUAGE="JavaScript">                                     
            <!--
            //显示风格和字体字符的处理                                     
            function flipImage_disc (imageTagName, newImageObject)                                     
                {                                     
                if (document.images)                                     
                    {                                     
                    document [imageTagName].src = newImageObject.src;                                     
                    }                                     
                                     
                return true;                                     
                }                                     
                      
            function setStyle_message (newStyle)                                     
                {                                     
                var selection = frames.comment.document.selection.createRange ();                                     
                selection.execCommand (newStyle);                                     
                frames.comment.focus();                                     
                return true;                                     
                }                                     
                                     
            function setFont_message ()                                     
                {                                     
                var selectedRange = frames.comment.document.selection.createRange ();                                     
                selectedRange.execCommand ("FontName", true, document.fmain.FontName.options [document.fmain.FontName.selectedIndex].value);                                     
                selectedRange.execCommand ("FontSize", true, document.fmain.FontSize.options [document.fmain.FontSize.selectedIndex].value);                                     
                selectedRange.select ();                                     
                frames.comment.focus();                                     
                return true;                                     
                }                                     
            // -->                                     
        </SCRIPT>
<!--  文本格式处理工具栏  -->                                     
<TABLE  BORDER="0" WIDTH="449" BGCOLOR="#CCCCCC" CELLPADDING="0" CELLSPACING="0">                                 
    <TR >                                 
        <TD  WIDTH="300" BACKGROUND="images/toolbar.gif" height="20">                                 
            <TABLE  BORDER="0" WIDTH="300" CELLPADDING="0" CELLSPACING="0">                                 
                <TR >                                 
                    <TD  WIDTH="5" height="14">                                 
                        <IMG  SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="Bold" BORDER="0" WIDTH="25" HEIGHT="20" ID="bold" NAME="bold" onmouseover="flipImage_disc('bold', buttonImage_up)" onmouseout="flipImage_disc ('bold', buttonImage_normal)" onmousedown="flipImage_disc ('bold', buttonImage_down); setStyle_message ('bold'); return false;" onmouseup="flipImage_disc ('bold', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="Italic" BORDER="0" WIDTH="25" HEIGHT="20" ID="italic" NAME="italic" onmouseover="flipImage_disc('italic', buttonImage_up)" onmouseout="flipImage_disc ('italic', buttonImage_normal)" onmousedown="flipImage_disc ('italic', buttonImage_down); setStyle_message ('italic'); return false;" onmouseup="flipImage_disc ('italic', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="Underline" BORDER="0" WIDTH="25" HEIGHT="20" ID="underline" NAME="underline" onmouseover="flipImage_disc('underline', buttonImage_up)" onmouseout="flipImage_disc ('underline', buttonImage_normal)" onmousedown="flipImage_disc ('underline', buttonImage_down); setStyle_message ('underline'); return false;" onmouseup="flipImage_disc ('underline', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="Left" BORDER="0" WIDTH="25" HEIGHT="20" ID="justifyleft" NAME="justifyleft" onmouseover="flipImage_disc('justifyleft', buttonImage_up)" onmouseout="flipImage_disc ('justifyleft', buttonImage_normal)" onmousedown="flipImage_disc ('justifyleft', buttonImage_down); setStyle_message ('JustifyLeft'); return false;" onmouseup="flipImage_disc ('justifyleft', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="Centre" BORDER="0" WIDTH="25" HEIGHT="20" ID="justifycenter" NAME="justifycenter" onmouseover="flipImage_disc ('justifycenter', buttonImage_up)" onmouseout="flipImage_disc ('justifycenter', buttonImage_normal)" onmousedown="flipImage_disc ('justifycenter', buttonImage_down); setStyle_message ('JustifyCenter'); return false;" onmouseup="flipImage_disc ('justifycenter', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="Right" BORDER="0" WIDTH="25" HEIGHT="20" ID="justifyright" NAME="justifyright" onmouseover="flipImage_disc ('justifyright', buttonImage_up)" onmouseout="flipImage_disc ('justifyright', buttonImage_normal)" onmousedown="flipImage_disc ('justifyright', buttonImage_down); setStyle_message ('JustifyRight'); return false;" onmouseup="flipImage_disc ('justifyright', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="Justify" BORDER="0" WIDTH="25" HEIGHT="20" ID="justifyfull" NAME="justifyfull" onmouseover="flipImage_disc ('justifyfull', buttonImage_up)" onmouseout="flipImage_disc ('justifyfull', buttonImage_normal)" onmousedown="flipImage_disc ('justifyfull', buttonImage_down); setStyle_message ('JustifyFull'); return false;" onmouseup="flipImage_disc ('justifyfull', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="5" height="14">                                 
                        <IMG  SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="Bulleted List" BORDER="0" WIDTH="25" HEIGHT="20" ID="bulleted" NAME="bulleted" onmouseover="flipImage_disc ('bulleted', buttonImage_up)" onmouseout="flipImage_disc ('bulleted', buttonImage_normal)" onmousedown="flipImage_disc ('bulleted', buttonImage_down); setStyle_message ('InsertUnorderedList'); return false;" onmouseup="flipImage_disc ('bulleted', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="Numbered List" BORDER="0" WIDTH="25" HEIGHT="20" ID="numbered" NAME="numbered" onmouseover="flipImage_disc ('numbered', buttonImage_up)" onmouseout="flipImage_disc ('numbered', buttonImage_normal)" onmousedown="flipImage_disc ('numbered', buttonImage_down); setStyle_message ('InsertOrderedList'); return false;" onmouseup="flipImage_disc ('numbered', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="5" height="14">                                 
                        <IMG  SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="Indent" BORDER="0" WIDTH="25" HEIGHT="20" ID="indent" NAME="indent" onmouseover="flipImage_disc ('indent', buttonImage_up)" onmouseout="flipImage_disc ('indent', buttonImage_normal)" onmousedown="flipImage_disc ('indent', buttonImage_down); setStyle_message ('Indent'); return false;" onmouseup="flipImage_disc ('indent', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="25" height="14">                                 
                        <IMG  SRC="images/button_normal.gif" ALT="outdent" BORDER="0" WIDTH="25" HEIGHT="20" ID="outdent" NAME="outdent" onmouseover="flipImage_disc ('outdent', buttonImage_up)" onmouseout="flipImage_disc ('outdent', buttonImage_normal)" onmousedown="flipImage_disc ('outdent', buttonImage_down); setStyle_message ('Outdent'); return false;" onmouseup="flipImage_disc ('outdent', buttonImage_up); return false;" />                                 
                    </TD>                                 
                    <TD  WIDTH="5" height="14">                                 
                        <IMG  SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />                                 
                    </TD>                                 
                </TR>                                 
            </TABLE>                                 
        </TD>                                 
        <TD  WIDTH="185">
        <!-- 字体字号设置工具栏 -->                                
        <table border="0" width="100%" cellspacing="0" cellpadding="0" height="23">                     
          <tr>                     
            <td width="33%" height="23">                                
        <SELECT NAME="FontName"  onchange="setFont_message (); return false;">                                
            <OPTION VALUE="宋体"  SELECTED />宋体                          
            <OPTION VALUE="楷体"  />楷体                          
            <OPTION VALUE="隶书"  />隶书                          
            <OPTION VALUE="黑体"  />黑体                     
        </SELECT>                          
            </td>               
            <td width="33%" height="23">                          
        <SELECT NAME="FontSize"  onchange="setFont_message (); return false;" size="1">                          
            <OPTION VALUE="3"  />普通       
                    <option value="1">1(8磅)</option>       
            <OPTION VALUE="2"  />2(10磅)                          
            <OPTION VALUE="3"  />3(12磅)                          
            <OPTION VALUE="4"  />4(14磅)                          
            <OPTION VALUE="5"  />5(18磅)                          
            <OPTION VALUE="6"  />6(24磅)                          
            <OPTION VALUE="7"  />7(36磅)                          
        </SELECT>                          
            </td>               
            <td width="34%" height="23">
        <!--工具栏按钮之间的分隔图 -->                         
        <IMG  SRC="images/toolbar_spacer.gif" ALT=" " BORDER="0" WIDTH="5" HEIGHT="20" />                          
            </td>               
          </tr>               
        </table>               
      </TD>                          
    </TR>                          
</TABLE>                          
<!--文本内容输入框，相当于textarea-->                       
<IFRAME NAME="comment"  ID="comment" WIDTH="450" HEIGHT="160">                          
</IFRAME>                          
<BR  />                        
<INPUT  NAME="comment" VALUE="" TYPE="hidden" />                              
<SCRIPT LANGUAGE="JavaScript">                           
    <!--                           
    var editControl = frames.comment.document;                           
    editControl.designMode = "On";                           
    // -->                           
</SCRIPT>                                     
</td>                                           
      </tr>                                           
      <tr bgcolor="#F7F7F7">                                            
        <td width="88%" bgcolor="#F7F7F7" height="25" colspan=2>                                     
          <input type="submit" value=" 发表 ">
        </td>                                          
      </tr>                                          
    </form>
    </table>                                          
</body>
</html>  
JavaScript获取input文本框参数，并通过超链接结合Javascript方法，传参数到Servlet
qq_40366444的博客
05-13 2316
点击超链接就可以提交input文本框中的数据 JavaScript方法 function addHrefPara(obj){ var href = obj.getAttribute("href");//获取超链接路径 var areaCode=$("#chooseid").find("option:selected").data("areaCode"); //获取id为#c...
JS实现文本框不可编辑
热门推荐
meijory的博客
09-17 5万+
JS实现文本框不可编辑 方法1: onfocus=this.blur() 当鼠标放不上就离开焦点  方法2:readonly     方法3: disabled  disabled>  disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。 readonly="readonly" 只读字段是不能修改的。 js动态实
js实现的简易编辑框
11-11
js最简单的代码实现的简单实用，且好看的编辑框，是初学者的首选
js对input框的可编辑属性设置
KevinXu9339的博客
11-11 334
添加disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("disabled","disabled"); 移除disabled属性 $('#areaSelect').attr("disabled",false); $('#areaSelect').removeAttr("disabled"); $...
js实现简单的文本框编辑
m0_37962105的博客
08-08 1857
js实现简单的文本框编辑 javascrip 编辑 <div id="ull"> <input type="text"> <button>保存</button> <button>取消</button>
JavaScript-设置文本框不可编辑与可编辑
MonkeyBrothers的博客
02-04 7375
1.我们需要首先建立一个HTML骨架，这个可以用编译器快速生成。 2.然后我们把基本的内容输入完成。 3.再接着就是写JavaScript事件，首先写个禁用的功能吧。 var btn1 = document.getElementById('btn1'); btn1.onclick = fun
使用js制作一个发布
KB0824liu的博客
04-03 123
【代码】使用js制作一个发布。
js添加删除行和双击变文本框的脚本
10-30
综上所述，通过JavaScript实现添加和删除表格行以及双击变文本框的功能需要综合运用DOM操作方法、事件处理和元素的属性修改。这些技术的熟练运用，将使得Web页面的交互更加流畅和人性化。学习和实践这些技能对于前端...
js动态生成文本框并有删除功能
11-23
### JS动态生成文本框并实现删除功能的知识点 在现代Web开发中，动态地操作DOM（文档对象模型）是常见的需求之一。通过JavaScript可以轻松地实现这一目标。本篇文章将详细解析如何使用JavaScript来动态创建文本框，...
JS实现左右文本框成员管理功能教程
资源摘要信息:"本资源是一个压缩包文件，标题为'JS实现左右文本框成员管理代码.zip'，描述也指向同一标题内容，即该压缩包内包含了利用JavaScript实现的左右文本框成员管理系统的代码。标签为'js 前端'，表明该系统...
JQuery 文本框回车跳到下一个文本框示例代码
10-26
在网页表单设计中，有时候我们希望用户在输入文本框时按下回车键，能够自动跳转到下一个文本框继续输入，而不是提交整个表单。这可以提高用户体验，特别是对于多字段的登录或注册表单而言。在本示例中，我们将通过...
JavaScript实现点击按钮后跳出可编辑的文本框
wingsb的博客
01-09 1万+
使用prompt()方法来实现： &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function disp_prompt(){ var name=prompt("输入的内容",""); if (name!=null &amp;&amp; name!="") {
js点击使内容变成可编辑状态
qq_28339819的博客
12-06 1万+
原生JS点击按钮使内容变成可编辑状态，然后使用保存数据
双击文字出现编辑文本框的JS代码，并可编辑成功
yinxianluo的专栏
01-11 3234
双击文本实现编辑 input.a {border:1px solid #fff;background:#fff;} input.b {border:1px solid #369;background:#fff;} var test = document.getElementById("test"); var mysubmit = document.getElemen
文本框的编辑状态的修改方法：启用编辑/禁用编辑
kahhy的博客
03-17 4601
关于文本框的编辑，在js中可以进行随意修改其是否可编辑的状态   一. disabled属性的使用：          禁用状态的修改：            1. $("#id").attr("disabled",true);            2. $("#id")[0].disabled="true";        启用状态的修改：            $("#i
让文本框不可编辑java,JavaScript-设置文本框不可编辑与可编辑
weixin_32019329的博客
03-13 2007
1.我们需要首先建立一个HTML骨架，这个可以用编译器快速生成。2.然后我们把基本的内容输入完成。3.再接着就是写JavaScript事件，首先写个禁用的功能吧。var btn1 = document.getElementById('btn1');btn1.onclick = function () {var txt = document.getElementById('txt');txt.dis...
JS点击文字后变为输入框编辑
不正经的博客
10-23 5750
&lt;span id="it1"&gt;内容&lt;/span&gt; &lt;a href="javascript:;" id="a1" onclick="cg(this)"&gt;修改&lt;/a&gt; &lt;span id="it2"&gt;内容&lt;/span&gt; &lt;a href
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值