编辑文本文本的Javascript

分享于 

17分钟阅读

Web开发

  繁體 雙語

编辑文本文本的Javascript

你可以在我的网站上看到这里javascript的操作: www.nulacomputers.com 仅尝试文本编辑。 但是,不要点击发送按钮( 除非你真的想发表评论) !

内容

用于在textarea中管理html输入的 Javascript

用于插入简单标签文本的文本文本的 html按钮。

文本,用于插入带有css类或者 css id的标签。

使用剩余字符替换文本

用于在文本文本中管理html输入的Javascript

html-input-form上的De textarea元素有缺点。 语法为:<文本> 初始文本 </textarea>。 在html页面上作为编码,你可以看到一个带有 inside的inputfield,inputfield'初始文本'。 这种情况很好,但是当你想要使用inputfield的时候会发生什么? 假定初始文本为'。<textarea> 一些文本 </textarea>'。 那么网页上的语法将是: 文本文本( <文本> <textarea> 部分文本 </textarea> </textarea>。 这就会让浏览器。 浏览器可能会在文本inputfield中显示'。<文本> 一些文本',并在'</textarea>'出现后跳过所有内容。 但是对于每个浏览器,这可能是不同的。

当你在网页上看到一个允许你在页面上提供注释的文本文件inputfield时,你经常会看到。 html标记由方括号更改。 例如 <p> 变成 [p]。 这是可以接受的,但有时难以阅读。

我用javascript创建了另。 使用下面的javascript,你可以不用任何更改就可以使用 html。 那我们该怎么做?

首先:避免 <textarea> 初始文本 </textarea>。

更改这里选项: <textarea name="inputfield1"></textarea>

更改 body 标签: <body onLoad="OnloadFunction()">

创建一个javascript函数,如下所示:

function OnloadFunction()
{
 NulA_Fill_inputfield(); // This should fill all your textareas somefunction(); // optional your own other code on Onload. some_other_function(); // optional your own other code on Onload.}

文本字段由函数 NulA_Fill_inputfield() 初始化。 它看起来像这样:

var NulA_Fill_vars = new Array();
NulA_Fill_vars[0] = "initialising text for inputfield1, completely free if properly escaped to fit in a javascript string"; 
NulA_Fill_vars[1] = "initialising text for inputfield2, completely free if properly escaped to fit in a javascript string"; 
NulA_Fill_vars[n-1] = "initialising text for inputfieldn, completely free if properly escaped to fit in a javascript string"; function NulA_Fill_inputfield()
{
 document.forms["FormName"].elements.namedItem("inputfield1").value = NulA_Fill_vars[0];
 document.forms["FormName"].elements.namedItem("inputfield2").value = NulA_Fill_vars[1];
 document.forms["FormName"].elements.namedItem("inputfieldn").value = NulA_Fill_vars[n-1];
}

要使它的有用,你应该拥有一些内容管理系统( 在php中,asp。perl ),可以:

  • 从数据库中检索字符串并将它的放入javascript数组中;
  • 从webform处理字符串并将它的存储在数据库中。

一旦你有了这个,你就可以在你的文本。

内容

用于在textarea中管理html输入的 Javascript

用于插入简单标签的文本文本的html按钮

文本,用于插入带有css类或者 css id的标签。

使用剩余字符替换文本

用于插入简单标签的文本文本的html按钮

当你在网页上看到一个网页上的文本文件inputfield时,你经常会看到html标签的按钮。 我对这些按钮的工作方式不满意。 所以我创建了以下 javascript,用于在文本文本中编写 html。

首先,我在文本框中放置了一个帮助按钮 上面。 我用了一个蓝色的圆圈,里面有一个H。 当点击帮助文本时,会出现没有经验的用户的帮助文本。 再次单击它,帮助文本消失。

按钮右边有第二个按钮,可以访问 html-edit-buttons。 我使用了 indigo rectangle 和编辑。 单击它,编辑按钮消失。 再次单击,你就可以访问编辑按钮。 在窗体上只有一个 textarea,这很简单。 但是如果有十个文本区域,用户只需编辑它的中的一个,那么最好有这个功能。

两个按钮的工作方式与javascript事件相同:

onclick="javascript:return NulA_CMS_switch_on_off('element_id')

element_id是要使它的可见或者不可见的div元素的id。

函数非常简单:

function NulA_CMS_switch_on_off(elementid) {
 div = document.getElementById(elementid);
 if (div.style.display == "none") 
 div.style.display = "";
 else div.style.display = "none";
 returnfalse;
}

对于每个html标记,访问者可以使用我创建的按钮。 这些按钮被分组并与div对齐。 我跳过这个部分。 你可以在我的网站上看到。

每个按钮都有如下所示的编码:

<inputtype="image"src="http://www.yourdomain.com/buttons/p.gif"alt="p"title="p"onclick="javascript:return NulA_CMS_insert('FormName', 'element_name', 'p', 5000, 500)"/>

这显示一个按钮,上面有一个P。 ( 从 <p>,段落标记。)

这里按钮的目的是将 inside 设置为字符串 <p>,文本 </p>

单击 NulA_CMS_insert 时,使用表单名称调用,标记inputfield的名称。最大文本长度和整数键。

( 对于关键字,我使用最大文本长度除以 10. 当 textarea 90%,填充时,访问者会收到警告。 请参见 below。)

在这个例子中标签是 <p>。

NulA_CMS_insert() 将字符串 <p/p> 放在文本 </p 在selected插入caret插入 caret caret。 用户可以简单地输入和输入文本将在 <p> 和 </p> 之间。

如果你使用 Firefox,这很好。 有了 IE 它就不会。 我没有在其他浏览器中尝试过。 可能稍后,但请随意扩展其他浏览器的代码。

这个函数很简单。 变量selname是可选的,用于css选择器。 本文后面将对它进行明确的介绍。

在下面的文本中,我删除了大部分函数。 完整的函数在源代码中。 被忽略的部分处理其他标签。

function NulA_CMS_insert(formname, fname, ac, maxlength, critical, selname)
{
 obj = document.forms[formname].elements.namedItem(fname);
 if (obj == null) returnfalse;
 if(typeof(selname) === "undefined") selname = "";
 i_select = 0;
 insert = "";
 switch (ac) {
 case"p":
 insert = "<" + ac + selname + ">your text</" + ac + ">n";
 i_select = 9; // 'your text' has length 9. we select this text if possible  pluspos = 2 + ac.length + selname.length; // the length of the tag plus two for the char '<' and the char '>'break;
 }
 pos = get_CaretPosition(obj); // find the current position of the carret oldValue = obj.value;
 len = oldValue.length;
 switch (pos) { // insert the string in the textare.value on the position of the caretcase -1:
 case len:
 pos = len;
 newValue = oldValue + insert;
 break;
 case0:
 newValue = insert + oldValue;
 break;
 default:
 newValue = oldValue.substring(0, pos) + insert + oldValue.substring(pos, len);
 break;
 }
 obj.value = newValue;
 NulA_CharCount(formname, fname, maxlength, critical); // calculate remaining charactersif (obj.selectionStart) {
 obj.focus();
 // we inserted <p>your text</p>// now we select the string 'your text' obj.setSelectionRange(pos + pluspos, pos + pluspos + i_select);
 } else {
 obj.focus();
 }
 returnfalse;
}

现在插入html标签,( 如果浏览器允许) 在开始标记和结束标记之间选择了字符串。 这样用户就可以开始键入自己的文本了。 ( 注:在 IE 中,字符串在文本的末尾添加。 在 Firefox 中,它按预期工作。 我还没有尝试其他浏览器。

内容

用于在textarea中管理html输入的 Javascript

用于插入简单标签文本的文本文本的 html按钮。

文本的html按钮插入带有css类或者css标识的标签

使用剩余字符替换文本

文本的html按钮插入带有css类或者css标识的标签

有一个网页你经常有css文件。 这些文件有选择器:带有类和标记的标记。 当人们可以使用这些css选择器时很不错。 要启用这里功能,我将提交一个提交按钮,并且一个选择 inputfield 上面,它的中包含如下代码:

带有标签'+'的提交按钮:

<input class="submit" type="submit"value="+" onclick="javascript:return NulA_CMS_insert_sel('FormName', 'h7', 5000, 500)"/>

注:h7是textarea元素的NAME。 你可以为文本文本选择任何 NAME,但是你必须与命名一致。

选择 inputfield ( 在这种情况下只有一个选择):

<selectclass="select"id="sb_h7"name="sb_h7"size="1"><optionselectedvalue="div.comment"style="background-color:#99FFFF;">div.comment</option>

注:h7是textarea元素的NAME。 sb_h7代表通道h7的selectbox。

首先选择其中一个选项。 然后单击带有标签'+'的按钮。 结果,字符串如下:

<div.comment> 你的文本 </div> 插入文本插入符的位置。 如果选择另一个选项,则会得到另一个css选择器代替'div.comment'.

submit按钮具有以下事件:

onclick="javascript:return NulA_CMS_insert_sel('FormCMS', 'h7', 5000, 500) 这将调用函数:

function NulA_CMS_insert_sel(formname, fname, maxlength, critical)
{
 objSB = document.forms[formname].elements.namedItem("sb_" + fname); // find the selectbox element with css selectorsif (objSB == null) returnfalse;
 var seloption = objSB.options[objSB.selectedIndex].value; // find the selected itemvar selector = "";
 var elem = "";
 var elname = "";
 for (i=0; i<seloption.length; i++) // find the. or # sign to find out if the selector is a class or an id. {
 switch (seloption.substring(i, i+1))
 {
 case".":
 selector = "class";
 break;
 case"#":
 selector = "id";
 break;
 default:
 if (selector == "")
 elem = elem + seloption.substring(i, i+1); // add the char tot the part that comes before the '.' or the '#'else elname = elname + seloption.substring(i, i+1); // add the char tot the part that comes after the '.' or the '#'break;
 }
 }// with <option selected value="div.comment"> we get:// elem = 'div'// selector = 'class'// elname = 'comment'// now we call the function we described 上面, this time with selname NulA_CMS_insert(formname, fname, elem, maxlength, critical, "" + selector + "="" + elname + """);
 returnfalse;
}
内容

用于在textarea中管理html输入的 Javascript

用于插入简单标签文本的文本文本的 html按钮。

文本,用于插入带有css类或者 css id的标签。

带剩余字符的文本

带有剩余字符的textarea:

在准备好 上面 之后,我们将文本页放置在

<divid="error_div_h7"style="display:none;color=#FF0000;"><h2>**** ERROR ****</h2></div><pclass="textcount">Resterend aantal tekens: <bid="b_h7"class="ta_unchanged">5000</b></p><textareaclass="textarea"name="h7"id="h7"cols="75"rows="10"onkeydown="NulA_OnKeyDown(event, 'FormCMS', 'h7')"onkeyup="NulA_CharCount('formname', 'h7', 5000, 4500)"></textarea>

首先,我们将错误消息 上面 添加到 style="display:none;" 中,这意味着它没有显示。 当访问者类型比允许的字符类型多时,我们将。

其次,我们向访问者发送一条消息,用它可以在文本框中输入的字符数量。 最初这个元素被赋予了类 ta_unchanged,这意味着。

访问者键入的字符的数量显示在粗体标记中。 当没有更改时,这里标记具有类 ta_unchanged。 更改后,将获取类 ta_changed。 当访问者几乎使用所有的字符时,它会得到类 ta_critical。 当访问者键入很多内容时,它会得到类 ta_error。 这些类给带有剩余字符的粗体文本赋予不同的颜色。

第三,我们定义了

  • 用于处理特殊键的onkeydown 事件。
  • 在输入后计算字符的onkeyup 事件。

onkeydown 事件:

我使用 Alt + u 来更新表单。 当有很多输入字段的大窗体时,如果不必向下滚动,则感谢它。

我使用 Alt + a 来添加一个css选择器作为描述。 Alt + a 与按标签'+'按钮按钮相同。

onkeydown 事件调用该函数:

function NulA_OnKeyDown(event, formname, fname) {
 if(typeof(fname) === "undefined") fname = "";
 if ( event.altKey == true ) { // do nothing if the alt key was not pressedif (event.keyCode == 85 || event.keyCode == 117) // submit on alt+u or alt+U NulA_submit_function(formname);
 else {
 if (fname!= "" && (event.keyCode == 65 || event.keyCode == 97)) { // add the on alt+a or alt+Aif (typeof NulA_CMS_insert_sel == "function")
 NulA_CMS_insert_sel(formname, fname);
 }
 }
 }
}

onkeyup 事件:

这将调用函数:

function NulA_CharCount(formname, fldname, maxlength, critical)
{
 var objTA = document.forms[formname].elements.namedItem(fldname); // textarea as objectif (objTA == null)
 returnfalse;
 var objError = document.getElementById('error_div_' + formname + '_' + fldname); // error div as objectvar objBold = document.getElementById('b_' + formname + '_' + fldname); // bold as objectvar remaining = maxlength - objTA.value.length; // chars left to typevar labelclass = 'ta_changed'; // set the labelclass to a default value.if (remaining <0) { // input is to big. Set the error element to visbible. labelclass = 'ta_error';
 if (objError!= null)
 objError.style.display = "";
 } else {
 if (objError!= null)
 objError.style.display = "none"; // make error element invisbleif (remaining <critical)
 labelclass = 'ta_critical'; // not many chars left to type }
 if (objBold!= null) {
 objBold.innerHTML = remaining; // display amount of chars left to type objBold.className = labelclass; // set the style (color, font) of the element with the chars left to type }
 returnfalse;
}

JAVA  Javascript  文本  TEX  EDI  
相关文章