html怎么实现获取文本框输入内容再按替换模板替换再输出到另一个文本框?

html-css025

html怎么实现获取文本框输入内容再按替换模板替换再输出到另一个文本框?,第1张

其实认真想一下就可以实现了。首先就是先获取输入框的value 值 点击之后 将这个value 内容在另外一个输入框显示。

再细分一下,获取到 输入框的value 之后, 可以通过正则截取 src和 alt 的内容,

当点击按钮的时候,将获到的数据 添加到 要显示的文本框就可以了。

可以使用输入框的val()方法来获取input的值,给按钮绑定点击事件触发弹出该输入框的值。

工具原料:编辑器、浏览器

1、解决的思路就是给一个按钮绑定点击事件,然后参数该输入框的值,代码如下:

<html>

<head>

<script type="text/javascript" src="libs/jquery/2.1.4/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    alert($(":text").val())

  })

})

</script>

</head>

<body>

<p>Name: <input type="text" name="user" value="" /></p>

<button>改变文本域的值</button>

</body>

</html>

2、运行的结果如下:

  html中获取标签的数据,可以通过js来获取,如下代码:

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">

function validate(){

//一 .是通过jDOM

// var attitudeObj = document.getElementById("attitude")

//var attitude = attitudeObj.innerHTML

//二 .是通过jquery

var att = $("#attitude").text()//可以得到输入域中的内容

var idnum = $("#idnum").val()

var name = $("#name").val()

var t_name =  $("#t_name").val()

var pro_name =  $("#pro_name").val()

// alert(att)

if( name == null || name == "" ){

alert("请输入毕业设计名称!")

return false

}

att   =   att.replace(/\s+/g,"")

if( att == null || att == ""){

alert("请输入选题须知!")

return false

}

if( t_name == null || t_name == "" ){

alert("请选择教师!")

return false

}

if( pro_name == null || pro_name == ""){

alert("请选择专业!")

return false

}

location="teacher/mainfra.jsp"

//location="teacherAction_AddGraduationTitle.action?idnum=" + idnum +"&cname=" + cname +"&start=" + start+"&end=" + end

return true

}

</script>

</head>

<body">

<div >

<div style="margin-left: 100px">

<!--   <form action="teacherAction_AddGraduationTitle.action" method="post" >-->

<span>自动编号:</span><input type="text" readonly="readonly" name="idnum" id="idnum" style="background: gray" value="<s:property value="#request.maxIdnum"/>"/><br/>

<br/>

<span>毕业设计名称:</span><input type="text" name="name" id="name"/><br/><br/>

<span>所属教师:</span><select name="t_name" id="t_name">

<option></option>

<s:iterator value="teacherList">

<option value="<s:property value='idnum' />"><s:property value="name" /></option>

</s:iterator>

</select><br/><br/>

<span>所属专业:</span><select name="pro_name" id="pro_name">

<option></option>

<s:iterator value="professionList">

<option value="<s:property value='idnum' />"><s:property value="pro_name" /></option>

</s:iterator>

</select>

<br/>

<br/>

<span>选题须知:</span>

<textarea id ="attitude" name="attitude" rows="3" cols="30" style="color: red">

</textarea>

<br/>

<br/>

<input type="button" value="添加">  <input style="margin-left: 100px" type="reset" value="重置">

<!-- </form>-->

</div>

</div>

</body>