如何检查输入字段是否足够大以显示完整内容?

huangapple go评论74阅读模式
英文:

How to check if input field is large enough to display full content?

问题

I'm using a Vuetify text-field component inside a table with many columns. It is possible that this component contains too much content to be displayed and from a UX perspective it takes too much time to check the content by scrolling inside the field if there are many cells.

Plain HTML example

Vuetify example

My first idea ( please let me know if you know better ones ) was to display a tooltip showing the full content but this would be annoying if the component is able to display the full content. So I only want to display the tooltip if content would be hidden/cut off.

So is there a way to get to know if the component is displaying the full content or if something is hidden/cut off? ( Table performance is important so I don't know if very complex calculations on value changes are worth it )

I tried

( Playground )

<script setup>
import { ref, watch } from 'vue'

const field = ref()
const msg = ref(
'Hello World! too much content in this text field component to display.'
)
const isCuttingOff = ref(false)

watch(
msg,
() => {
const inputWidth = field.value?.clientWidth
const inputValueWidth = msg.value.length // !!! measure the input value here !!!

  console.log({ inputWidth, inputValueWidth })

  isCuttingOff.value = inputWidth < inputValueWidth
},
{ immediate: true }

)
</script>

<template>
<v-app>
<div class="text-h3">Is cutting off: {{ isCuttingOff }}</div>
<v-container class="w-25">
<v-text-field ref="field" label="fsfdsf" v-model="msg" />
</v-container>
</v-app>
</template>

but

  • on startup, the variable inputWidth is undefined
  • I don't know how to calculate the variable inputValueWidth
英文:

I'm using a Vuetify text-field component inside a table with many columns. It is possible that this component contains too much content to be displayed and from a UX perspective it takes too much time to check the content by scrolling inside the field if there are many cells.

Plain HTML example

Vuetify example

My first idea ( please let me know if you know better ones ) was to display a tooltip showing the full content but this would be annoying if the component is able to display the full content. So I only want to display the tooltip if content would be hidden/cut off.

So is there a way to get to know if the component is displaying the full content or if something is hidden/cut off? ( Table performance is important so I don't know if very complex calculations on value changes are worth it )

I tried

( Playground )

&lt;script setup&gt;
  import { ref, watch } from &#39;vue&#39;

  const field = ref()
  const msg = ref(
    &#39;Hello World! too much content in this text field component to display.&#39;
  )
  const isCuttingOff = ref(false)

  watch(
    msg,
    () =&gt; {
      const inputWidth = field.value?.clientWidth
      const inputValueWidth = msg.value.length // !!! measure the input value here !!!

      console.log({ inputWidth, inputValueWidth })

      isCuttingOff.value = inputWidth &lt; inputValueWidth
    },
    { immediate: true }
  )
&lt;/script&gt;

&lt;template&gt;
  &lt;v-app&gt;
    &lt;div class=&quot;text-h3&quot;&gt;Is cutting off: {{ isCuttingOff }}&lt;/div&gt;
    &lt;v-container class=&quot;w-25&quot;&gt;
      &lt;v-text-field ref=&quot;field&quot; label=&quot;fsfdsf&quot; v-model=&quot;msg&quot; /&gt;
    &lt;/v-container&gt;
  &lt;/v-app&gt;
&lt;/template&gt;

but

  • on startup, the variable inputWidth is undefined
  • I don't know how to calculate the variable inputValueWidth

答案1

得分: 1

I managed to compare textbox's clientWidth with its scrollWidth by modifying your code as below.

1- Got rid of field ref.

2- Gave v-text-field an id

3- added a check function and called it in watch callback function

4- inside check I checked input's clientWidth and scrollWidth

5- To get it to run in the initial load, I assigned an empty string to msg and changed it to the original string at the bottom of the script.

Check it here

英文:

I managed to compare textbox's clientWidth with its scrollWidth by modifying your code as below.

1- Got rid of field ref.

2- Gave v-text-field an id

3- added a check function and called it in watch callback function

4- inside check I checked input's clientWidth and scrollWidth

5- To get it to run in the initial load, I assigned an empty string to msg and changed it to the original string at the bottom of the script.

Check it here

&lt;script setup&gt;
  import { ref, watch } from &#39;vue&#39;

  const msg = ref(&quot;&quot;)

  const isCuttingOff = ref(false)

  function check() {
    const elm = document.querySelector(&#39;#txt&#39;)
    isCuttingOff.value = elm.clientWidth &lt; elm.scrollWidth;
    // todo : custom tooltip or any other solution for long texts
  }

  watch(
    msg,
    (currentMsg, oldMessage, callback) =&gt; {
      callback(check)
    },
    { immediate: true }
  )

  msg.value =
    &#39;Hello World! too much content in this text cfield component to display.&#39;
&lt;/script&gt;
&lt;script&gt;&lt;/script&gt;
&lt;template&gt;
  &lt;v-app&gt;
    &lt;div class=&quot;text-h3&quot;&gt;Is cutting off: {{ isCuttingOff }}&lt;/div&gt;
    &lt;v-container class=&quot;w-25&quot;&gt;
      &lt;v-text-field id=&quot;txt&quot; v-model=&quot;msg&quot; /&gt;
    &lt;/v-container&gt;
  &lt;/v-app&gt;
&lt;/template&gt;


答案2

得分: 0

> 只需要 title 属性和少量 css

使用 css 来显示文本的溢出,如 ....(省略号),并使用 title 属性在悬停时显示完整内容,类似弹出窗口

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World! too much content in this text field component to display')
</script>

<template>
  <h1 :title=msg>{{ msg }}</h1>
  <input v-model="msg">
</template>

<style>
  h1{
    max-width: 15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
英文:

> You just need title attribute and little css

Using css to display the overflow of text like .... (ellipsis) and title attribute is used to show the full content on hover like popup

&lt;script setup&gt;
import { ref } from &#39;vue&#39;

const msg = ref(&#39;Hello World! too much content in this text field component to display&#39;)
&lt;/script&gt;

&lt;template&gt;
  &lt;h1 :title=msg&gt;{{ msg }}&lt;/h1&gt;
  &lt;input v-model=&quot;msg&quot;&gt;
&lt;/template&gt;

&lt;style&gt;
  h1{
    max-width: 15rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }
&lt;/style&gt;

huangapple
  • 本文由 发表于 2023年6月6日 11:31:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76411282.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定