My issue involves an input field where users can input text from an array of emojis. When a user selects an emoji, it should display as an icon styled by an external stylesheet. However, there are two problems:
- The name of the icon appears on top of the displayed icon.
- The size of the input field changes when an icon is shown.
I want to resolve both of these issues.
Below is my current code snippet:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.inArray demo</title>
<style>
div {
color: blue;
}
span {
color: red;
}
.em{
font-color:white;
}
</style>
<script src="jquery-1.10.2.js"></script>
<link href="emoji.css" rel="stylesheet">
</head>
<body>
<div class ="see"></div>
<code>HEY</code>
<input class="input">
<div class ="see"></div>
<div class ="see2"></div>
<div class ="see3"></div>
<div class="add"></div>
<script>
var emojiss = [ "--abc", "--woman","--eye"];
var emoji=["-angel","-alien","----1","---1","--100","--1234","--8ball","--a","--ab","--abc","--abcd","--accept","--admission_tickets","--adult","--aerial_tramway","--airplane","--airplane_arriving","--airplane_departure"]
var input=$(".input");
var input2=$(".input").val();
$(input).change(function(){
$(".see").html( $(".input").val());
if(jQuery.inArray($(".input").val(), emoji) != -1) {
var see=$(".see").html().replace('--', '').replace('--', '');
$(".see2").html(see);
var classs =see+"";
alert($(".see").html());
<!-- $(".see3").html(real); -->
$(this).addClass("em em"+$(".see").html()).removeClass("see");
} else {
alert("is NOT in array");
}
});
</script>
</body>
</html>