实现文本框输入内容提示代码实例

实现文本框输入内容提示代码实例:
比较人性化的网站一般都是比较讲究细节的,比如文本框输入内容具有提示效果,在默认情况下,文本框有提示文本,当鼠标放入文本框输入文本的时候,提示文本会消失,下面就通过代码实例介绍一下如何实现此效果。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<script type="text/javascript">
window.onload=function(){
  var otxt=document.getElementById("txt");
  otxt.onfocus=function(){
    if(otxt.value=="请输入网站名称"){
      otxt.value="";
    }
  }
  otxt.onblur=function(){
    if(otxt.value==""){
      otxt.value="请输入网站名称";
    }
  }
}
</script>
</head>
<body>
<input type="text" id="txt" value="请输入网站名称"/>
</body>
</html>

以上代码实现了我们的要求,代码非常的简单,这里就不多介绍了,就是为文本框注册onfocus和onblur事件,进行相关的判断然后进行调整文本框的value属性即可。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0612/4012.html

最为原始地址是:http://www.softwhy.com

时间: 2024-12-22 14:01:19

实现文本框输入内容提示代码实例的相关文章

文本框输入数字倒计实例代码

文本框输入数字倒计实例代码:一般情况下,文本框中文字的个数并不是无限的,也就是说具有一定的限制,在人性化程度较好的网站一般有输入文字倒计效果,这样可以便于浏览者组织语言,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>文本框输入文字倒计实例代码-蚂蚁部落</title> <style t

简单的文本框输入自动提示

简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来. 这里没有使用到数据库,直接在PHP用数组模拟数据存储.  demo演示 原理主要是: 监听输入框的状态,当有改变的时候即刻通过ajax发送数据并取得返回值. 主要使用了jQuery封装很方便,但貌似我这个兼容性不咋地...主要提供个思路吧~ js部分: <script type="text/javascript" src="./js/jquery.min.js">&l

文本框输入内容智能提示效果

实现效果如图 大体思路: 1.监听文本框事件.这里是用的keyup事件.大家可以尝试用onchange事件.不过感觉keyup事件的效果要好一点. 2.根据输入内容通过ajax异步的方式去访问后台数据. 3.遍历返回数据将数据添加到显示区域. 4.在添加数据的同时给每一条数据加上一些效果,点击其中一条将数据填到文本框,并且提示内容消失. 5.后台数据应该拼接成json格式.我这里的格式是这样的[{"name":"张三","sex","男

Selenium向iframe富文本框输入内容

目录 前言 只输入纯文本 通过JS注入HTML代码 前言 在使用Selenium测试一些CMS后台系统时,有时会遇到一些富文本框,如下图所示: 整个富文本编辑器是通过iframe嵌入到网页中的,手动尝试输入内容,发现内容是输入到iframe页面的body中的, 这种富文本框怎么输入呢? 我们也可以直接在body的源码上点击右键选择Edit HTML,输入相应的html代码,达到向富文本框输入的目的,如下下图: 以下是使用Selenium的操作方法 只输入纯文本 如果只输入不带格式的纯文本,可以先

关于MFC文本框输入内容的获取 与 设置文本框的内容

八月要开始做界面了<( ̄︶ ̄)/,然而目前只会用MFC╮(╯▽╰)╭ 好吧,言归正传,设置好文本框后,要获取用户输入的内容,可以用: GetDlgItemText() ; 这个函数有两个参数,第一个参数为文本框的ID号,比如IDC_EDIT3,然后用第二个参数存储其内容; 要想设置某文本框的内容,可以用: SetDlgItemText(); 参数类比之前的获取函数:

input文本框实现宽度自适应代码实例

代码实例如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><script type="text/javascript">win

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,'')"/>

Java+Selenium向文本框输入内容以后模仿键盘的&quot;ENTRY&quot;

在自动化测试中我们避免不了要模仿一些键盘上按钮的操作,普通的字母,数字,特殊符号,这些都是很简单的,有时候我们也会模仿"SHIFT","ALT","CONTROL",这些Selenium已经提供了Action了,具体如下: Actions actions = new Actions(driver); actions.keyDown(Keys.CONTROL);//按下,松开control actions.keyDown(Keys.CONTROL)

验证文本框输入内容类型是汉字

JS代码如下: 1 <script type="text/javascript"> 2 function check() { 3 if (isChina(document.getElementById("Text_Value").value)) { 4 alert("輸入正確"); 5 //do something 6 } 7 else { 8 alert("輸入不正確"); 9 return false; 10