- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个文本输入:<input type="text">
我有一个 Icomoon @font-face 字体设置,它有一些我希望通过用户单击的按钮进入输入的理想符号。
我的 font-face 字体可以选择使用 HTML 实体,例如:

我的 javascript 生成了一个数据属性值数组,然后我将其映射到十六进制值,例如这个心形符号(注意我认为我称它为十六进制值是正确的):
\u2665
那么有什么方法可以让它正常工作吗?或者我需要重新考虑我的方法。将 HTML 实体直接放入我的 HTML 中显示图标有效,我猜测它是如何通过设置 .val();
放置的。在输入中它导致问题。
$('.char__item-indv').click(function(event) {
var word = $(this).attr('data-value'),
input_word = $('#wordSelector').val(),
input_start_word = $('#wordSelector')[0].defaultValue,
char_array = new Array();
char_array['and'] = '&';
char_array['apo'] = '\x27';
char_array['at'] = '@';
char_array['bee'] = '';
char_array['dot'] = '.';
char_array['heart'] = '\u2665';
char_array['the'] = '';
if(input_word == input_start_word) {
input_word = '';
}
if(input_word.length < 12) {
var new_word = input_word+char_array[word];
$('#wordSelector').val(new_word);
$(this).prop("selectedIndex",0);
$('#wordSelector').focus();
}
});
.word-selector__input {
margin-bottom: 24px;
}
.word-selector__char {
margin-bottom: 24px;
}
.word-selector .char__item {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="word-selector">
<div class="word-selector__input">
<input name="input-word" type="text" maxlength="12" id="wordSelector" />
</div>
<div class="word-selector__char">
<div class="char__item">
<img class="char__item-indv" alt="AND" src="http://placehold.it/50x50" data-value="and" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="Apostrophe" src="http://placehold.it/50x50" data-value="apo" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="@" src="http://placehold.it/50x50" data-value="at" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="Bee" src="http://placehold.it/50x50" data-value="bee" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="Dot" src="http://placehold.it/50x50" data-value="dot" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="Heart" src="http://placehold.it/50x50" data-value="heart" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="The" src="http://placehold.it/50x50" data-value="the" />
</div>
</div>
<div class="word-selector__submitter">
<input type="submit" name="Btn1" value="Go" onclick="" id="Btn1" />
</div>
</div>
为了让事情更简单,我做了一个工作示例: http://codepen.io/vdecree/pen/QwOvaX
最佳答案
让 html 完成转换它的艰苦工作:
var text = $("<div/>").html(char_array[word]).text();
var new_word = input_word + text;
$('.char__item-indv').click(function(event) {
var word = $(this).attr('data-value'),
input_word = $('#wordSelector').val(),
input_start_word = $('#wordSelector')[0].defaultValue,
char_array = new Array();
char_array['and'] = '&';
char_array['apo'] = '\x27';
char_array['at'] = '@';
char_array['bee'] = '';
char_array['dot'] = '.';
char_array['heart'] = '\u2665';
char_array['the'] = '';
if(input_word == input_start_word) {
input_word = '';
}
if(input_word.length < 12) {
var text = $("<div/>").html(char_array[word]).text();
var new_word = input_word + text;
$('#wordSelector').val(new_word);
$(this).prop("selectedIndex",0);
$('#wordSelector').focus();
}
});
.word-selector__input {
margin-bottom: 24px;
}
.word-selector__char {
margin-bottom: 24px;
}
.word-selector .char__item {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="word-selector">
<div class="word-selector__input">
<input name="input-word" type="text" maxlength="12" id="wordSelector" />
</div>
<div class="word-selector__char">
<div class="char__item">
<img class="char__item-indv" alt="AND" src="http://placehold.it/50x50" data-value="and" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="Apostrophe" src="http://placehold.it/50x50" data-value="apo" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="@" src="http://placehold.it/50x50" data-value="at" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="Bee" src="http://placehold.it/50x50" data-value="bee" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="Dot" src="http://placehold.it/50x50" data-value="dot" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="Heart" src="http://placehold.it/50x50" data-value="heart" />
</div>
<div class="char__item">
<img class="char__item-indv" alt="The" src="http://placehold.it/50x50" data-value="the" />
</div>
</div>
<div class="word-selector__submitter">
<input type="submit" name="Btn1" value="Go" onclick="" id="Btn1" />
</div>
</div>
关于javascript - 是否可以通过 javascript 将 @font-face html 实体输入到输入中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28370137/
大家好,我正在使用 OpenCV(Python)开发人脸识别程序。我有两个文件,一个可以捕捉新用户的脸并按用户提供的名称存储它。第二个文件识别使用网络摄像头的用户。现在,我担心的是用户被正确识别,但名
一般来说,我的字体工作正常,但我偶尔会看到一些奇怪的情况,例如从另一个应用程序切换回浏览器,有时当从另一个选项卡切换回时,我的字体似乎已经卸载并正在使用后备字体。 我正在努力始终如一地复制它,当我看到
我经常在我开发的网站中嵌入 webfont (@font-face),直到今天我才遇到过重大问题。 其实我觉得line-height有很大的问题,我英文不是特别好所以我尽量用图来说明。我已经联系了 f
屏幕截图很棒,但没有呈现自定义 @font-face 字体。是否有可能纠正这一点? 最佳答案 在做了一些研究之后,我发现了这个 http://code.google.com/p/phantomjs/i
所以我有一个字体,我最近在几个网站上使用了它,叫做 Kondolar。这是一种可爱的字体,我实际上使用了 4 种字体粗细,所以在我的样式表中实际上有 4 个 @font-face 定义,每个定义都有自
非常感谢:)请找到完整的代码 导入boto3 s3_client = boto3.client('s3', aws_access_key_id='xxxxxxxxxxxxxxx', aws_secre
这不是以下的骗局:Can we test Face ID in simulator? 我想知道如何测试用户何时接受下面的 Face ID 警告,上面写着“你想允许“应用程序”使用 Face ID”,然
我需要检测 iPhone 朝向哪个方向,以便在掉落时从无障碍摄像头(正面或背面)进行录制。 这将在紧急情况下使用,手机掉落或放置在事件摄像头没有记录任何有值(value)内容的情况下。 我可以使用什么
我有一个需要 Trade Gothic 的网站。我想知道将 @font-face 或 cufon 与看起来类似于 Trade Gothic 的字体一起使用还是只是使用图像路线是更好的做法。显然,使用图
我在使用 Microsoft Face API 时遇到问题。以下是我的示例请求: curl -v -X POST "https://westus.api.cognitive.microsoft.com
我有一个在图像上运行并识别人脸并返回如下列表的脚本: [('Mike', (142, 464, 365, 241)),('Garry', (42, 364, 65, 141)),('unknown',
我有一个网络服务,可以重写 css 文件中的 url,以便可以通过 CDN 提供它们。 css 文件可以包含图像或字体的 url。 我目前有以下正则表达式来匹配 css 文件中的所有 url: (ur
我在乱用 @font-face 并且得到了一些奇怪的结果。我下载并安装了字体,它像它应该的那样安装在/Users/myuser/Library/Fonts 中(我想!?)。奇怪的是,无论我在 CSS
JSF 2 的 Mojarra 实现具有以下上下文参数: com.sun.faces.numberOfViewsInSession(默认为 15) com.sun.faces.numberOfLogi
jsf-api.jar 包含各种本地化的 Messages.properties 文件,这些文件一方面包含 javax.faces.component.UIInput.CONVERSION 键,另一方
谁能介绍一下 Liferay Faces 和 JSF 连接。就像我无法理解 Liferay 人脸在以下场景中的作用。 JSF ----> Model View Controller Spr
我正在尝试使用我的字体的“较轻”版本,但在 firefox 和 chrome 中它仍然显示为“正常”粗细。 这是我的 font.css: @font-face { font-family: Aveni
尝试访问应用程序时出现以下JavaScript错误。 Uncaught SyntaxError: Unexpected token 和的正常运行是必需的)。 您可能已经知道HTML文档通常通常以<和J
在我的应用程序中,我想对 UIImage 使用人脸检测,所以我使用库中的 CoreImage 构建(我知道 Vision Library 也是最新的人脸检测库。但它仅支持 ios 11.0 及以上)。
我需要从 Stylus 获得以下 CSS 输出(这是一种落后的方式,但 Stylus 将使该元素的许多其他部分变得更容易)。我已经尝试了很多东西,但无法编译,当它说它已经编译时,这部分输出没有任何显示
我是一名优秀的程序员,十分优秀!