0
votes

Ajoutez du texte non modifiable avant / après la valeur d'entrée sans changer de valeur

Puis-je ajouter une valeur avant ou après une valeur d'entrée?

Je souhaite modifier le texte affiché pour la valeur, mais sans changer la valeur. Donc, si je lisais la valeur, il devrait toujours renvoyer 1000. xxx

Comment puis-je ajouter le texte foo avant ou bar < / Code> Après 1000 Withouth Changement de la valeur elle-même?

foo et bar ne doit pas être modifiable par l'utilisateur.


4 commentaires

avant / après l'élément sur une enveloppe?


Voulez-vous ajouter un élément HTML après et avant l'élément d'entrée? Ou ajoutez-les dans la valeur? Ce n'est pas clair que voulez-vous réaliser.


Ce n'est pas clair ce que vous demandez. Cherchez-vous à modifier la valeur du champ de saisie ou recherchez-vous un texte de décoration qui ressemble à une partie de l'entrée, mais n'est pas, comme des étiquettes (c'est-à-dire payer 1000 $ payer et $ est décoration)?


Je veux modifier le texte affiché pour la valeur, mais sans changer la valeur. Donc, si je lisais la valeur, il devrait toujours retourner 1000.


5 Réponses :


0
votes

Ce moyen le plus simple serait de et des éléments avant et après: xxx

puis utilisez CSS pour styler le


1 commentaires

Je ne sais pas pourquoi cela est bullevé. Il n'est pas clair de la part de l'op de quoi le supplément foo et bar est pour. C'est sans doute la meilleure façon du point de vue de l'accessibilité? Ou nous pourrions tout coller dans un attribut de données et coller deux doigts jusqu'à l'accessibilité?



1
votes

Utiliser l'attribut de données pour une entrée multiple

p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input class="myInput" type="text" data-before="foo" data-after="bar" value="1000">

<input class="myInput" type="text" data-before="foo1" data-after="bar1" value="1000">

<input class="myInput" type="text" data-before="foo2" data-after="bar2" value="1000">


6 commentaires

J'ai besoin de foo et de barre pour ne être visible que pas éditable. Mais je n'ai pas mentionné cela, alors c'est de ma faute


Ensuite, comment voulez-vous que toute la chose soit affichée?


Comme FOO 1000 bar , mais seulement 1000 devrait être modifiable. Dans la vraie application, je souhaite ajouter mm (MILI Mètres) après la valeur d'entrée. Je pensais pouvoir le résoudre avec CSS: après, mais je n'ai pas pu le faire.


Entrée S N'a pas de pseudo-éléments. Par conséquent, vous ne pourrez pas utiliser :: avant et :: après pour cela. Cependant, vous pouvez l'envelopper avec un span , puis utiliser les éléments pseudo.


@Nimsrules, pouvez-vous donner un exemple s'il vous plaît?


Veuillez vérifier mon édition ici - Stackoverflow.com/a/56109751/2427237



1
votes

var saise = document.getelementbyID ('myInput'); INPUT.VALUE = "FOO" + INPUT.VALUE + "BAR"; code>

edit strud> p>

le marquage p>

p>

<span>
   <input id="myInput" type="text" value="1000">
</span>


1 commentaires

J'ai besoin du contenu mm à côté de la valeur, mais cela semble impossible, alors j'accepte votre réponse.



2
votes

Bien que ce ne soit pas la plus élégante, une possibilité serait d'inclure les parties "FOO" et "bar" de la chaîne de l'attribut de valeur de l'élément via une fonction d'assistance (c.-à-d. SETValue () code> ci-dessous ), puis "assainir" ces pièces supplémentaires hors de la valeur des entrées lors de l'accès à la valeur souhaitée de l'entrée (c.-à-d. getvalue () code> ci-dessous):

p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="myInput" type="text" value="1000">


2 commentaires

Mais "foo" et "bar" peuvent toujours être édités par l'utilisateur.


C'est vrai, j'ai besoin de foo et de barre pour ne être visible que pas éditable. Mais je n'ai pas mentionné cela, alors c'est de ma faute.



1
votes

peut enregistrer la valeur 1000 dans la valeur de données = "1000"

et peut sélectionner cette valeur par document.QuerySelectorallall ('[valeur de données]');

ou

en utilisant

première entrée à afficher et deuxième à poster sur serveur


1 commentaires

J'ai besoin de foo et de barre pour ne être visible que pas éditable. Mais je n'ai pas mentionné cela, alors c'est de ma faute