首頁猿問用JS 區(qū)別兩個輸入框之間內容的區(qū)別

用JS 區(qū)別兩個輸入框之間內容的區(qū)別

JavaScript

Thisis 2016-01-15 16:19:11

并將那些不一樣的內容改變字體顏色 ?。這個怎么做到

查看完整描述

3 回答

逆光之羽

TA貢獻55條經(jīng)驗獲得超13個贊

<!DOCTYPE?HTML>
<%@page?contentType="text/html"?pageEncoding="utf-8"%>
<html>
<head>
</head>
<script?type="text/javascript"?src="jquery.min.js"></script>?
<script?type="text/javascript">
????$(function(){
????????$("#t1").change(function(){
????????????changeText();
????????????});
????????$("#t2").change(function(){
????????????changeText();
????????????});
????});
????
????//檢測文字的不同并改變顏色
????function?changeText(){
????????var?val1?=?$("#t1").val();
????????var?val2?=?$("#t2").val();
????????//如果其中任意一個字符串未輸入，不執(zhí)行對比
????????if(val1.length?==?0?||?val2.length?==?0){????
????????????//清空展示框
????????????$("#str1").html("<font?color='red'>比較時必須兩個字符串都不為空</font>");
????????????$("#str2").html("");
????????????return;
????????}
????????var?len?=?0;
????????var?subStr?=?"";
????????//取較短字符串的長度
????????if(val1.length?<=?val2.length){
????????????len?=?val1.length;
????????????subStr?=?val2.substring(val1.length-1,val2.length-1);????????//獲取較長字符串多出來的那段文字
????????}else{
????????????len?=?val2.length;
????????????subStr?=?val1.substring(val2.length-1,val1.length-1);????????//獲取較長字符串多出來的那段文字
????????}
????????var?str1?="";
????????var?str2?="";
????????//對比后獲取展示字符串
????????for(var?i=0;i<len;i++){
????????????var?char1?=?val1.charAt(i);
????????????var?char2?=?val2.charAt(i);
????????????if(char1?!=?char2){
????????????????char1?=?"<font?color='red'>"+char1+"</font>";
????????????????char2?=?"<font?color='red'>"+char2+"</font>";
????????????}
????????????str1?+=?char1;
????????????str2?+=?char2;
????????}
????????//如果截取的文字不為空，添加字體樣式
????????if(subStr?!=?""){
????????????subStr?=?"<font?color='red'>"+subStr+"</font>";?
????????}
????????//添加文字提示
????????str1?=?"字符串1："+str1;
????????str2?=?"字符串2："+str2;
????????//較長的字符串加上被截取的部分
????????if(val1.length?>?val2.length){
????????????str1?+=?subStr;
????????}else?if(val2.length?>?val1.length){
????????????str2?+=?subStr;
????????}
????????//清空展示框
????????$("#str1").html("");
????????$("#str2").html("");
????????//展示框中添加對比結果
????????$("#str1").append(str1);
????????$("#str2").append(str2);
????}
</script>
<body>
????<div>
????????輸入框1：<input?id="t1"?type="text"><span?style="margin-left:50px;">提示：用的onchange事件,輸入兩個字符串后隨便點擊一下空白處就可以觸發(fā)</span>
????????<br>
????????輸入框2：<input?id="t2"?type="text">
????</div>
????<div>
????????<div?id="str1"?style="margin-top:20px;"></div>
????????<div?id="str2"></div>
????</div>
</body>
</html>