我琢磨一天没能做出来：按钮实现delete功能，不用键盘

niuniu 2002-05-23 07:48:53

前提是不可以使用键盘
就是在一个text的form中用一个button实现delete功能，
insert已经实现了，块delete也实现了，就是删除光标后一个字母实现不了.
原码如下：
<HTML>
<HEAD>
<SCRIPT>
function storeCaret (textEl) {
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();
}
function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text;
}
else
textEl.value = text;
}
function deleteAtCaret (textEl) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
document.selection.clear();
}
//alert(aForm.aTextArea.
}

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" WRAP="soft" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);"> 这是例子，你可以在这里添加文字、插入文字。 </TEXTAREA>
<BR>
<INPUT TYPE="text" NAME="aText" SIZE="80" VALUE="我要在光标处插入这些文字"><BR>
<INPUT TYPE="button" VALUE="我要在光标处插入上面文本框里输入的文字！" ONCLICK="insertAtCaret(this.form.aTextArea, this.form.aText.value);">
<INPUT TYPE="button" VALUE="delete" ONCLICK="deleteAtCaret(this.form.aTextArea);" id=button1 name=button1>
</FORM>
<script language="javascript">
document.write(aForm.aTextArea.cols);
//document.write(aForm.aTextArea.);
</script>
</BODY>
</HTML>

...全文

96 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

qiushuiwuhen 2002-05-24

打赏
举报

用这种删除光标前面的字符
var rng=document.selection.createRange();
rng.moveStart("character", -1)
rng.text="";

niuniu 2002-05-24

打赏
举报

我想只移动前一个或后一个呢，怎么实现？

weidegong 2002-05-24

打赏
举报

我琢磨了半天，试图
document.selection.createRange().moveEnd("character",-1)
document.selection.createRange().moveStart("character",-1)
document.selection.createRange().moveStart("character",1)

发现都不能删除光标前面的字符

qiushuiwuhen 2002-05-24

打赏
举报

上面的代码已被修正过了，原因见
http://www.blueidea.com/bbs/newsdetail.asp?id=471098

代码如下：
<HTML>
<HEAD>
<SCRIPT>
function insertAtCaret (textEl, text) {
textEl.focus();
document.selection.createRange().text += text
textEl.blur();
}
function deleteAtCaret (textEl) {
textEl.focus();
document.selection.createRange().moveEnd("character",1)
document.selection.clear();
textEl.blur();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" WRAP="soft"> 这是例子，你可以在这里添加文字、插入文字。 </TEXTAREA>
<BR>
<INPUT TYPE="text" NAME="aText" SIZE="80" VALUE="我要在光标处插入这些文字"><BR>
<INPUT TYPE="button" VALUE="我要在光标处插入上面文本框里输入的文字！" ONCLICK="insertAtCaret(this.form.aTextArea, this.form.aText.value);">
<INPUT TYPE="button" VALUE="我要删除光标后面的一个文字！" ONCLICK="deleteAtCaret(this.form.aTextArea);">
</FORM>
</BODY>
</HTML>

wizz 2002-05-24

打赏
举报

呵呵，我的生意来了，，大家不要抢。。：）

下面时代码，只改了一句话。

<HTML>
<HEAD>
<SCRIPT>
function storeCaret (textEl) {
if (textEl.createTextRange)
textEl.caretPos = document.selection.createRange().duplicate();
}
function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos = textEl.caretPos;
caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text;
}
else
textEl.value = text;
}
function deleteAtCaret (textEl) {
if (textEl.createTextRange && textEl.caretPos) {
textEl.caretPos.select();
document.selection.clear();
}
//alert(aForm.aTextArea.
}

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="aForm">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="80" WRAP="soft" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);"> 这是例子，你可以在这里添加文字、插入文字。 </TEXTAREA>
<BR>
<INPUT TYPE="text" NAME="aText" SIZE="80" VALUE="我要在光标处插入这些文字"><BR>
<INPUT TYPE="button" VALUE="我要在光标处插入上面文本框里输入的文字！" ONCLICK="insertAtCaret(this.form.aTextArea, this.form.aText.value);">
<INPUT TYPE="button" VALUE="delete" ONCLICK="deleteAtCaret(this.form.aTextArea);" id=button1 name=button1>
</FORM>
<script language="javascript">
document.write(aForm.aTextArea.cols);
//document.write(aForm.aTextArea.);
</script>
</BODY>
</HTML>