我正在建立类似输入内容的可编辑div。您应该单击div外部的一些标签以将其添加到div中,同时也可以在所述标签周围输入内容。
我正在使用用户选择:none(正常和webkit)以防止选择标记按钮,因此失去了插入符号的位置。它可以在Firefox和Chrome中使用,但不能在Safari中使用(我知道-webkit-前缀并正在使用它)。
我的问题的根源是保持插入符号的位置,同时使内容可编辑div。
我以前曾尝试使用rangy,但在Firefox方面存在一些限制。从UX的角度来看,这些限制非常令人讨厌。您可以向我的用户选择检查我以前的问题以及如何将我带到这里:无解决方案- 当用Rangy保存其位置时,Caret在Firefox中消失了
这就是我采用用户选择的解决方案的方式:无。
我的组件/ JS:
new Vue({
el: "#app",
data(){
return {
filters_toggled: false,
fake_input_content: '',
input_length: 0,
typed: false,
boolean_buttons: [{
type: '1',
label: '?I',
tag: '?I',
img: 'https://i.imgur.com/feHin0S.png'
}, {
type: '2',
label: 'SAU',
tag: 'SAU',
img: 'https://i.imgur.com/vWJeJwb.png'
}, {
type: '3',
label: 'NU',
tag: 'NU',
img: 'https://i.imgur.com/NNg1spZ.png'
}],
saved_sel: 0,
value: null,
options: ['list', 'of', 'options']
}
},
name: 'boolean-input',
methods: {
inputLength($event){
this.input_length = $event.target.innerText.length;
if(this.input_length == 0)
this.typed …Run Code Online (Sandbox Code Playgroud) 这仅在Firefox中发生。
重要提示:我正在使用rangy.saveSelection()保存插入符号的位置:
我需要通过多种方式不断保存的位置,以便能够在单击时插入html元素(我有一些标签)。
当我单击contentEditable div且div为空时(假设是第一个焦点),除非开始输入,否则看不到插入符号。如果插入符号在末尾,我也看不到它。
另一个怪异的行为是我不能使用箭头在contentEditable div中的文本之间导航。
如果我删除了(始终)保存插入符号位置的功能(在输入时单击等),则插入符号将恢复正常(插入符号可见)。
当我开始保存插入符号的位置时出现问题。显然,我应该进行某种重置或清除操作。但是,据我了解,这些操作似乎适得其反(因为据我了解,它们会破坏保存的插入符号位置)。
内容可编辑div
<div class="input__boolean input__boolean--no-focus">
<div
@keydown.enter.prevent
@blur="addPlaceholder"
@keyup="saveCursorLocation($event); fixDelete(); clearHtmlElem($event);"
@input="updateBooleanInput($event); clearHtmlElem($event);"
@paste="pasted"
v-on:click="clearPlaceholder(); saveCursorLocation($event);"
class="input__boolean-content"
ref="divInput"
contenteditable="true">Cuvinte cheie, cautare booleana..</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我的方法/功能
inputLength($event){
this.input_length = $event.target.innerText.length;
if(this.input_length == 0)
this.typed = false;
},
addPlaceholder(){
if(this.input_length == 0 && this.typed == false){
this.$refs.divInput.innerHTML = 'Cuvinte cheie, cautare booleana..'
}
},
clearPlaceholder(){
if(this.input_length == 0 && this.typed == false){
this.$refs.divInput.innerHTML = '';
}
},
updateBooleanInput($event){
this.typed = …Run Code Online (Sandbox Code Playgroud) 我最近开始使用 VueJS 工作,一位主要开发人员指示我永远不要将发出事件和 vuex 存储结合起来。基本上,如果项目将使用商店,请通过商店获取所有事件/状态。
从一个角度来看,我可以理解这一点,但在很多情况下,发出事件比通过商店获取所有内容要快得多。
这是不结合 Vuex 和发出事件的最佳实践吗?
我有这个选择,让我们称之为"X",通过SELECT从数据库填充汽车品牌作为选项.
<select name="X">
<?php
$row = mysqli_query("SELECT * FROM brands");
while($row2 = mysqli_fetch_array($row))
echo '<option value="' . $row2['brandID'] . '">' . $row2['brandName'] . '</option>
?>
</select>
Run Code Online (Sandbox Code Playgroud)
现在我必须填充第二个选择,称为"Y",其中包含所选品牌的特定模型.
例如,如果在第一个选择框(X)中选择的选项是奥迪,我应该在第二个选择(Y)中选择以下选项:A4,A6,TT,TTs
手动填充第二个选择框很简单,基本上与第一个只有不同的SQL请求相同.
$row = mysqli_query("SELECT modelName from modele WHERE brandName = '$brand'");
Run Code Online (Sandbox Code Playgroud)
根据第一个选择的选择,$ brand将有一个值.
谢谢
我正在尝试限制查询返回的行数.这是我正在使用的代码.
$min = ($id2-1)*16;
$max = $id2*16;
$row = mysql_query("SELECT * FROM anunt WHERE masina = 2 ORDER BY anuntID DESC LIMIT $min, $max") or die(mysql_error());
Run Code Online (Sandbox Code Playgroud)
ID2是从链接解析的值.因此,当ID2为2时,查询应该有16到32的限制 - 所以总共有16个条目.但我的问题是查询返回32个条目.这就像是跳过'$ min'的价值.我四方检查了一切,最后,该查询似乎是问题.
有任何想法吗?谢谢