小编Dar*_*kkz的帖子

用户选择:在Safari中没有人表现出不同

我正在努力实现的目标

我正在建立类似输入内容的可编辑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)

html javascript css rangy vue.js

6
推荐指数
1
解决办法
230
查看次数

用Rangy保存位置时,插入符号在Firefox中消失

这仅在Firefox中发生。

重要提示:我正在使用rangy.saveSelection()保存插入符号的位置:

  • 单击内容可编辑div时
  • 在键盘上
  • 将外部html元素(作为节点)添加到内容可编辑div时

我需要通过多种方式不断保存的位置,以便能够在单击时插入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)

html javascript firefox selection rangy

5
推荐指数
1
解决办法
149
查看次数

同时使用 Vuex 和发出事件

我最近开始使用 VueJS 工作,一位主要开发人员指示我永远不要将发出事件和 vuex 存储结合起来。基本上,如果项目将使用商店,请通过商店获取所有事件/状态。

从一个角度来看,我可以理解这一点,但在很多情况下,发出事件比通过商店获取所有内容要快得多。

这是不结合 Vuex 和发出事件的最佳实践吗?

javascript vue.js vuejs2

3
推荐指数
1
解决办法
1914
查看次数

根据第一个选择框选项填充第二个选择框

我有这个选择,让我们称之为"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将有一个值.

谢谢

php tags select auto-populate drop-down-menu

2
推荐指数
1
解决办法
4046
查看次数

限制返回的行数 - mysql

我正在尝试限制查询返回的行数.这是我正在使用的代码.

$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'的价值.我四方检查了一切,最后,该查询似乎是问题.

有任何想法吗?谢谢

php mysql limit

1
推荐指数
1
解决办法
1812
查看次数