`
381573578
  • 浏览: 72188 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

鼠标滑过显示文字,动态显示文本框中的字数

阅读更多
<script>
//定义文本框当前长度
var slength = document.getElementById('textarea').value.replace(/\s/gi, "").length;

//定义文本框最大长度
var maxLength=500;

var initStr="\n欢迎使用派能在线语音合成系统。\n"
                 +"请先在此输入文字,然后按[阅读]按钮及聆听结果。\n"
                 +"如有任何查询或意见,请电邮到pynonhr@gmail.com\n"; 

document.getElementById('textarea').innerHTML=initStr;
validateText();

//mouseover
function onTipsShowing(svalue){	
      document.getElementById('tips').innerHTML=svalue;
}

//mouseout
function onTipsRestoring(){	
if(maxLength<slength){
		document.getElementById('tips').innerHTML='<font color=red>'+slength+'</font>个字(字数上限:'+maxLength+')';
	}
	else{
		document.getElementById('tips').innerHTML=slength+'个字(字数上限:'+maxLength+')';
	}
}


function validateText(){
	 slength = document.getElementById('textarea').value.replace(/\s/gi, "").length;
}
	
</script> 




<div style="float: left">
<select id="speakingRate"
	onmouseover="document.getElementById('tips').innerHTML= '改变合成语速'"
	onmouseout=" onTipsRestoring()">
	<option value="100">慢</option>
	<option value="90" selected="selected">普通</option>
	<option value="80">快</option>
</select>

<button id="synthesize" type="button "
	onmouseover="onTipsShowing('请阅读下面的文字')" 
       onmouseout="'">朗读</button>

<button id="reset" type="button"
	onmouseover="onTipsShowing('将下面的文本重设为初始文本')"
	onmouseout="onTipsRestoring()"
	onmousedown="document.getElementById('textarea').innerHTML=initStr;validateText();">
重设</button>

<button id="clear" type="button"
	onmousemove="onTipsShowing('清除下面文本的内容')" 
       onmouseout="onTipsRestoring()"
	onmousedown="document.getElementById('textarea').innerHTML=''">清除</button>

</div> 
0
0
分享到:
评论

相关推荐

    点击文字显示在文本框里HTML代码.rar

    总结一下,这个压缩包中的HTML代码示例展示了如何利用HTML和JavaScript实现点击文字后在文本框中显示文字的功能。通过`&lt;a&gt;`标签创建点击文字,`&lt;input type="text"&gt;`创建文本框,再配合JavaScript的事件监听和DOM...

    文本框显示描述文字

    "文本框显示描述文字"这一主题,主要关注如何在文本框中显示提示性信息,以指导用户进行有效输入。这种功能通常通过JavaScript库,如jQuery,来实现。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件...

    MATLAB GUI教学视频3:滚动条的数值显示在文本框中

    在这个MATLAB GUI教学视频3中,主要讲解了如何将滚动条的数值实时显示在文本框中,这是一个在GUI设计中常见的需求,有助于提升用户交互体验。 首先,滚动条(Slider)在MATLAB GUI中是一种常用的控件,用于让用户...

    当鼠标划过文本框,自动选中文本框中的内容

    ### 当鼠标划过文本框,自动选中文本框中的内容 #### 技术背景与应用场景 在网页设计和开发过程中,提升用户体验是一项重要的任务。其中一个常见的需求是:当用户将鼠标光标移动到一个文本框上时,文本框内的内容...

    WPS让文字在两个文本框内自由滑动.docx

    - 将鼠标移至第二个文本框中,此时鼠标会变成一个带有把手的“口杯”形状。 - 单击鼠标完成文本框链接的建立。 2. **效果展示**: - 当第一个文本框中的内容超出其容量时,超出部分将自动链接到下一个文本框中。...

    文本框取鼠标事件文本框取鼠标事件

    - **定义**:文本框是网页表单中最常用的元素之一,用于接收用户输入的文字信息。 - **语法**: ```html ``` - **属性**: - `type="text"`:指定输入类型为文本。 - `name`:表单提交时使用的名称。 - `...

    JS双击文字显示文本框

    在JavaScript(JS)中,实现“双击文字显示文本框”的功能主要涉及到DOM操作、事件监听和用户交互设计。这个功能通常用于让用户编辑文本,比如评论或者备注,当用户双击文字时,文本框出现,用户可以进行编辑,然后...

    WPS让文字在两个文本框内滑动的方法.docx

    然而,在实际操作中可能会遇到这样的问题:当在一个文本框内输入文字时,如果内容过多,就需要将其转移到另一个文本框中,这时如果前后文本框中的内容不相互关联,将会导致布局混乱。本文将详细介绍如何在WPS中实现...

    WPS文字将两个文本框中的内容串连起来.docx

    - 将鼠标移至第二个文本框中,此时鼠标图标会变为一个带把手的“口杯”形状,单击鼠标即可完成链接。 - 此时,当第一个文本框中的内容超出其边界时,多余的文字会自动流入第二个文本框。 ##### 4. 断开文本框链接 -...

    jquery鼠标悬停下载按钮滑动显示提示信息文本框

    这个功能利用了JavaScript库jQuery的强大功能,实现了当鼠标悬浮在下载按钮上时,相关信息文本框会动态滑动显示,为用户提供更直观的上下文信息。 首先,我们需要理解jQuery库的基本概念。jQuery是一个轻量级的...

    WPS让文字在两个文本框内滑动.docx

    在WPS中,有时我们需要将文字输入到两个或多个文本框中,并希望这些文本框内的内容能够联动,即在一个文本框中添加或删除内容时,其他文本框中的内容能自动调整,保持整体的一致性。这可以通过创建“文本框链接”来...

    jquery文本框显示描述文字rar

    在本主题中,我们关注的是一个特定的jQuery特效:在文本框(input)中显示描述文字,当用户开始输入时这些文字会消失。这个功能常见于许多表单设计中,用于提示用户输入内容的类型或者格式,提供更好的用户体验。 ...

    jQuery textarea文本框输入文字字数限制提示代码

    本示例中,我们将探讨如何使用jQuery实现textarea文本框的字数限制功能,并实时提示用户输入的字符数量。 首先,让我们了解jQuery的基本概念。jQuery通过一个"$"符号作为入口,提供了一种简洁的方式来选择DOM元素、...

    asp.net后台实现文本框提示文字

    在ASP.NET开发中,我们经常需要为用户界面提供友好的提示信息,比如在文本框(TextBox)中显示默认的提示文字。这样的功能可以提高用户体验,因为它在用户输入前提供了清晰的指引。本篇文章将深入探讨如何在ASP.NET...

    WPS文字中多个文本框相互链接的攻略.docx

    - 将鼠标指针移到第二个文本框中,此时鼠标形状会变为特殊的形状(如图02所示),单击鼠标左键即可完成链接。 3. **验证链接效果**: - 输入或粘贴超出第一个文本框的内容将会自动链接到下一个文本框; - 第一个...

    js实现鼠标点击文本框自动选中内容的方法

    在Web开发中,页面上的文本框(input type="text")或者文本区域(textarea)元素通常用于接收用户的输入信息。有时为了提高用户体验,开发者希望当用户点击这些输入框时,能自动选中其中已经存在的示例文本,这样...

    input文本框里面显示小图片

    总结来说,要在`input`文本框中显示小图片,我们可以利用CSS背景图像、HTML5的`&lt;input type="image"&gt;`、HTML与JavaScript的组合,或是图标字体。具体选择哪种方法取决于项目需求、兼容性考虑以及交互复杂度。在实际...

    jquery表单文本框添加文字标签

    本文将深入探讨如何使用 jQuery 在表单文本框中添加文字标签,以提升用户界面的易用性和美观性。 首先,我们需要理解HTML中的表单元素,特别是`&lt;input&gt;`标签,它是用来创建表单输入字段的基本元素。通常,一个文本...

    jQuery计算文本框可输入字数代码.zip

    在这个"jQuery计算文本框可输入字数代码"中,开发者创建了一个功能,用于动态计算并显示文本框中可输入的字数。 首先,我们来看一下基础的HTML结构,通常会包含一个文本输入框和一个用于显示剩余字数的元素: ```...

    javascript动态增加文本框

    在JavaScript编程中,动态增加文本框是一项常见的交互功能,它允许用户在页面上根据需要添加额外的输入元素,而无需离开当前页面或进行页面刷新。这个功能常用于表单提交、数据输入等场景,比如创建多行文本输入、...

Global site tag (gtag.js) - Google Analytics